Нужно сделать что бы элемент при одном клике на него постепенно появлялся, а получается что приходится несколько раз кликать .
Вот участок с которым не могу разобраться,
var a = 0;
function up(el){
var s = el;
a += 0.1
s.style.opacity= a;
if(a<1)
{
setTimeout(up, 20);
}
}
вот весь код
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Изменение прозрачности DIV при наведении мыши.</title>
<STYLE type="text/css">
.paretndiv {
width:700px;
height:150px;
-moz-opacity: 0.0; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.0; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.0; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
}
.textbox{
height:inherit;
display: table-cell;
vertical-align: middle;
font-size:36px;
}
.image{
float:left;
}
</STYLE>
<script language="javascript" type="text/javascript">
var a = 0;
function up(el){
var s = el;
a += 0.1
s.style.opacity= a;
if(a<1)
{
setTimeout(up, 20);
}
}
function down(el){
el.style.opacity="0.0";
}
</script>
</head>
<body>
<div class="paretndiv" onclick="up(this)" onMouseOut="down(this)" id="item1">
<div class="image"><img src="1.jpg"></div><div class="textbox">Чашка кофе</div>
</div>
<div class="paretndiv" onclick="up(this)" onMouseOut="down(this)" id="item2">
<div class="image"><img src="2.jpg"></div><div class="textbox">Офисное кресло</div>
</div>
</body>
</html>
Заранее благодарю людей, которые откликнутся
