Как можно настроить прозрачность?

Question

[Николай]

Добрый день.
Пытаюсь установить JS скрипт с использованием прозрачности, но никак не могу привязать ее к div'ам. Т.е. при наведении появляются задние img, которые появляются по случайному рандому из-за того, что наложены друг на друга. Никаких примеров и в документации ничего похожего не нашел :(

$('img','#box')
	.each(function (){
		$(this).data('op',$(this).css('opacity'));
	})
	.mouseover(function (){		
		$(this).animate({opacity: 1}, 500 );
	})
	.mouseout(function (){
		$(this).stop(true,true).animate({opacity: $(this).data('op')}, 500 );
	});

<div id="box">
	<div id="des1">1<img src="imgs/about1.png" id="about1" style="opacity: 0;"></div>
	<div id="des2">2<img src="imgs/about2.png" id="about2" style="opacity: 0;"></div>
	<div id="des3">3<img src="imgs/about3.png" id="about3" style="opacity: 0;"></div>
</div>

Заранее, большое спасибо!

Answer 1

[Александр Анкудинов]

$('#box').find('.some-class-for-div').each(function (){
    $(this).data('op',$(this).css('opacity'));
  })
  .mouseover(function (){		
    $(this).animate({opacity: 1}, 500 );
  })
  .mouseout(function (){
    $(this).stop(true,true).animate({opacity: $(this).data('op')}, 500 );
  });

<div id="box">
  <div id="des1" class="some-class-for-div">1<img src="imgs/about1.png" id="about1" style="opacity: 0;"></div>
  <div id="des2" class="some-class-for-div">2<img src="imgs/about2.png" id="about2" style="opacity: 0;"></div>
  <div id="des3" class="some-class-for-div">3<img src="imgs/about3.png" id="about3" style="opacity: 0;"></div>
</div>

Comments

[Николай]

Если не трудно, подскажите пожалуйста как его интегрировать

[Александр Анкудинов]

Николай Жестков: поправил ответ

[Николай]

Как ни странно, все равно JS реагирует на изображение внутри дива. Т.е. даже не наведя на цифру, изображение уже начинает проявляться.

Answer 2

[Константин Китманов]

Не делайте так:) Всю эту анимацию давно можно сделать на CSS, что и проще, и производительней. Вот так.