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。

请帮助解决此问题的最佳方法。我试过悬停，但我没有成功。

TIA

Answer 1

$('.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 2

我建议使用.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 3

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

mouseenter，mouseleave，hover jQuery

3 个答案: