мышиный центр, мышиный отпуск, зависание jQuery

Question

У меня проблемы с этим событием. Я не уверен, что лучше всего использовать. Я пытаюсь сделать анимацию непрозрачности в зависимости от того, где находится мышь.

У меня есть эти структуры

    <div class="thumbnail-wrapper">
<a href="#">         
<img class="thumb" src="image/image1.png" />
</a>
<a href="#">    
<img class="thumb" src="image/image2.png" />
</a>
<a href="">    
<img class="thumb" src="image/image3.png" />
</a>
<a href="#">    
<img class="thumb" src="image/image4.png" />
</a>
<a href="#">    
<img class="thumb" src="image/image5.png" />
</a>    
</div>

По сути, я хочу, чтобы всякий раз, когда мышь вводила изображение, остальные изображения (кроме места, где находится мышь) будут изменять анимацию, а именно: $(img).stop().not(this).animate({"opacity":"0.4"}) и где одна мышь будет анимирована до непрозрачности: 1.

Пожалуйста, помогите, каков наилучший подход к этому. Я пробовал зависать, но безуспешно.

1011 * ТИА *

Answer 1

Я бы предложил использовать .delegate() ^help для привязки обработчика событий к переносу div.thumbnail-wrapper. Перехват всех mouseenter событий от <img> узлов там. Используйте .fadeTo() ^help и .siblings() ^help для выполнения задачи.

Пример: * * один тысяча двадцать-одна

$('div.thumbnail-wrapper').delegate('a', 'mouseenter', function(e) {
    $(this).stop(1,0).fadeTo('fast', 1).siblings().stop(1,0).fadeTo('fast', 0.2);
});

Демо : http://www.jsfiddle.net/qR2NU/2/
^{(в этом примере я использую div узлов, вам нужно заменить div на img в аргументах .delegate())}

Answer 2

$('.thumbnail-wrapper img') //all images under the wrapper
  .bind('mouseenter',function (){//when mouseenter,blur me,focus my siblings
     $(this).animate({"opacity":"0.4"}).siblings().animate({"opacity":"1"});
}).bind('mouseleave',function (){// when mouse out, default state or (make me sober as i call it )
     $(this).animate({"opacity":"1"})
});

Answer 3

$('.thumbnail-wrapper img').hover(function(){
    $(this).siblings().animate({'opacity': 0.4});
}, function(){
    $(this).siblings().animate({'opacity': 1});
});