gpt4 book ai didi

javascript - jquery fadeIn() fadeOut() 动画的问题

转载 作者:行者123 更新时间:2023-11-30 11:02:04 24 4
gpt4 key购买 nike

我正在创建一个可过滤的图库,以便用户可以选择类别,而图库将仅显示该类别的图像。

我想在悬停时更改图像,这非常简单。现在我正在尝试添加用于更改图像的动画,所以我希望旧图像会淡出然后更改图像并在更改图像后淡入。

我也做到了,但是有一个我无法弄清楚的错误。这仅在第一次运行时效果很好,然后再执行一次动画。例如,当我第二次悬停时,动画工作 2 次,如果我第 4 次悬停,动画工作 4 次。

$('.product_image').mouseenter(function() {
$(this).fadeOut('fast', function() {
$(this).attr('src', 'www.mydomain.com/img/default.jpg').fadeIn();
});

$('.product_image').mouseleave(function() {
$(this).fadeOut('fast', function() {
$(this).attr('src', 'realimage').fadeIn();
});

最佳答案

问题是因为 mouseleave 事件嵌套在 mouseenter 中,所以您每次都添加一个新的事件处理程序。

要解决此问题,请分离事件处理程序:

$('.product_image').mouseenter(function() {
$(this).fadeOut('fast', function() {
$(this).attr('src', 'www.mydomain.com/img/default.jpg').fadeIn();
});
});

$('.product_image').mouseleave(function() {
$(this).fadeOut('fast', function() {
$(this).attr('src', 'realimage').fadeIn();
});
});

请注意,您还可以通过在单个 jQuery 对象中使用 on() 来使其更加简洁:

$('.product_image').on({
mouseenter: function() {
$(this).fadeOut('fast', function() {
$(this).attr('src', 'www.mydomain.com/img/default.jpg').fadeIn();
});
},
mouseleave(function() {
$(this).fadeOut('fast', function() {
$(this).attr('src', 'realimage').fadeIn();
});
}
});

关于javascript - jquery fadeIn() fadeOut() 动画的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57311485/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com