javascript - mouseenter, mouseleave, hover 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。

请帮忙解决这个问题的最佳方法是什么。我试过悬停，但没有成功。

TIA

Answer 1

我建议使用 .delegate() ^help用于将事件处理程序绑定(bind)到包装 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())}