我想连续展示几个产品。将鼠标悬停在一个产品上时,其他产品会变得透明。我写了一个剧本,它完成了他的工作,但有一点光学问题。以下是代码的一部分:
$('#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');
});