Question

我创建了一个小动画。但是有一个错误。请看看这个小提琴：

Link to the fiddle

标题偏见错误。将猫悬停在触发动画上。然后，将鼠标悬停在飞入的链接上。 h1标题会崩溃并卡住。

可能是选择错误？看起来href也会触发一些元素。请帮助。

我可能已经解释过这很有趣，但很难解释并且难以欺骗这个bug。尝试悬停第二张照片。并转到第一个。在动画播放时，尝试将鼠标悬停在新的链接段落

上方

Answer 1

问题的核心是动画相互干扰。

以下是使用.stop（）方法停止当前动画的代码（在开始新动画之前）。

$(".gallery_container").on("mouseenter", function(){
    $('#color_overlay', this).stop().animate({ opacity:"0.7" }, {duration: 300, ease:     "easeOutQuint", queue: false});
    $('#sub_overskrift_container', this).stop().animate({ left: "0px" }, {duration: 300, ease: "easeOutQuint", queue: false});
    $('#paragraf_container', this).stop().animate({ left: "0px" }, {duration: 300, ease: "easeOutQuint", queue: false});
    $('#overskrift_container', this).stop().animate({ top: "300px" }, {duration: 500, ease: "easeOutQuint", queue: false});
});

$(".gallery_container").on("mouseleave", function(){    
    $('#color_overlay', this).stop().animate({ opacity:"0" }, {duration: 300, ease: "easeOutQuint", queue: false});
    $('#sub_overskrift_container', this).stop().animate({ left: "700px" }, {duration: 300, ease: "easeOutQuint", queue: false});
    $('#paragraf_container', this).stop().animate({ left: "-470px" }, {duration: 300, ease: "easeOutQuint", queue: false});
    $('#overskrift_container', this).stop().animate({ top: "200px" }, {duration: 700, ease: "easeOutQuint", queue: false});
});

小提琴链接：http://fiddle.jshell.net/CFx7k/8/

Jquery小动画错误

1 个答案: