javascript - 使一组元素透明(除了一个)

Question

我想连续展示一些产品。将鼠标悬停在一种产品上时，其他产品会变得透明。我编写了一个脚本，它完成了他的工作，但有一点光学问题。这是部分代码:

$('#product-black').find('img').hover(function() { 
    $('#product-red').find('img').fadeTo('slow', '0.05');
    $('#product-gray').find('img').fadeTo('slow', '0.05');
}, function() { 
    $('#product-red').find('img').stop().fadeTo('fast', '1');
    $('#product-gray').find('img').stop().fadeTo('fast', '1');
});

原始代码包含三个这样的代码片段 - 每个产品一个。我知道会有更好的方法...感谢您的帮助

问题:从产品黑色更改为产品红色时，第三个“闪烁”，因为产品 3 首先变得可见，然后再次变为透明。

Answer 1

使用 this 关键字并排除当前关键字，这样您就可以一次绑定(bind)所有三个。 stop() 应该在另一个动画开始时通过完成上一个动画来处理任何闪烁

var products = $('#product-black, #product-red, #product-gray').find('img');

products.hover(function () {
    products.not(this).stop(true, false).fadeTo('slow', '0.05');
},

function () {
    products.not(this).stop(true, false).fadeTo('slow', '1');
});