Показать сообщение отдельно
  #1 (permalink)  
Старый 13.01.2012, 23:22
Аспирант
Отправить личное сообщение для bazilio2010 Посмотреть профиль Найти все сообщения от bazilio2010
 
Регистрация: 04.10.2011
Сообщений: 34

Не могу разобраться с setTimeout
Нужно сделать что бы элемент при одном клике на него постепенно появлялся, а получается что приходится несколько раз кликать .

Вот участок с которым не могу разобраться,
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>

Заранее благодарю людей, которые откликнутся
Ответить с цитированием