使一组元素透明，但一个除外

Making group of elements transparent except one

本文关键字：一个 元素 一组 透明      更新时间：2023-09-26

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

$('#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 变得可见，然后再次变为透明。

使用 this 关键字并仅排除当前关键字，这样您就可以一次绑定所有三个关键字。 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');
});
相关文章：