悬停效果修复

Question

我在我的投资组合网站上使用悬停效果，当您在框之间来回移动时，它会表现得很有趣。有什么解决办法吗？

<script>
    jQuery(document).ready(function(e) {
        jQuery(".website a").hover(function() {
            jQuery(".website a").not(this).animate({ opacity: 0.4}); 
        }, function() {
            jQuery(".website a").animate({opacity: 1});
        });

    });

</script>

Answer 1

看起来通过应用 jQuery 的 .stop() 方法就可以了。下面的 stop(true, true) 方法调用是在调用 animate 方法之前进行的。所以目前运行动画在制作新动画之前停止。

jQuery(document).ready(function (e) {
    jQuery(".website a").hover(function () {
        jQuery(".website a").not(this).stop(true, true).animate({
            opacity: 0.4
        });
    }, function () {
        jQuery(".website a").stop(true, true).animate({
            opacity: 1
        });
    });

});

stop(true, true) 方法调用中的第一个 true 参数是 一个布尔值，指示是否也删除排队的动画。 第二个参数是 一个布尔值，指示是否立即完成当前动画。 两者都默认为 false。

Fiddle

悬停效果修复

Hover effect fix

jquery

jquery-hover