Javascript 多框悬停效果

我有多个框，我想对每个框应用悬停效果，当我悬停一个框时，所有其他框应该看起来更透明，提供更聚焦的效果。 我需要用一些缓慢的过渡效果来完成它

我试着按照下面的方式做，但似乎效果不好

---

---

有什么想法，为什么我的代码不起作用吗？不需要javascript来实现这一点，纯css可以：

.container:hover .thumb {
    opacity: .5;
}

.container:hover .thumb:hover {
    opacity: 1;
}

还有一把小提琴用来演示：

编辑：
随着时间的推移：

刚才补充说：

.thumb {
   ...
   transition: opacity 1s;
}

---

我注意到的原始解决方案的唯一真正问题是，当您从一个项目快速移动到另一个项目时，有时正在运行的动画会导致问题。这就是你想解决的问题吗？如果是这样，可以放置

stop（）

s来停止动画

试试这个：

---

你的问题是？我不认为你提供的代码有任何问题。。。假设您正在尝试执行看起来您正在尝试执行的操作。对不起，我已使用JSFIDLE链接进行了更新，上面的代码无法正常工作。您的FIDLE没有js或css。这里：OP说：“我需要用一些缓慢的过渡效果来完成它。”@PeterVR干得不错！请注意，当您悬停容器而不悬停任何拇指时，它们都将变得透明。这不是我想要的威尼斯创意，以集装箱为目标！我仍然希望它与JS一起在旧浏览器上工作。我会试着玩弄这个主意。谢谢你！这正是我想要的。我添加了一个简单的额外效果，现在它的岩石！非常感谢：）

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

.container:hover .thumb {
    opacity: .5;
}

.container:hover .thumb:hover {
    opacity: 1;
}

.thumb {
   ...
   transition: opacity 1s;
}

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