javascript - 悬停在多个框上的效果

Question

我有多个盒子，我想对每个盒子应用悬停效果，当我悬停一个盒子时，所有其他盒子应该显得更透明，从而产生更集中的效果。我需要用某种缓慢的过渡效果来完成它。

我试着按照下面的方式制作，但似乎效果不佳

http://jsfiddle.net/ahmed2222/rSNS5/2/

<div class="container">
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>  
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
 <div>

---

.container {
    width: 400px;
    overflow: auto;
}

.thumb {
    width:100px;
    height:100px;
    background: #000;  
    display: inline-table;
    margin: 10px;
}

---

$(function() {
    $('.thumb').hover(function () {
      $(this).css({"opacity":"1"});
      $('.thumb').not(this).animate({"opacity":"0.3"}, 1000);
    },
    function () {
      $('.thumb').css({"opacity":"1"});
    });
});

知道为什么我的代码不起作用吗？

Answer 1

我在您的原始解决方案中注意到的唯一真正问题是，当您从一个元素快速移动到另一个元素时，有时正在运行的动画会导致问题。这是您想解决的问题吗？如果是这样，您可以放置​​ stop() 来停止动画。

试试这个:http://jsfiddle.net/rSNS5/4/

$(function() {
    $('.thumb').hover(function () {
      $('.thumb').stop();
      $(this).css({"opacity":"1"});
      $('.thumb').not(this).animate({"opacity":"0.3"}, 1000);
    },
    function () {
      $('.thumb').stop().css({"opacity":"1"});
    });
});