Hover正在jquery中运行到我的初始动画中

我正在制作这个动画，以便在页面第一次加载时运行，并且您可以在将鼠标悬停在图片上时运行动画

我遇到的问题是，如果同时悬停to p标记，页面第一个动画将在何时运行。避免这种情况的最佳解决方案是什么

以下是JSFIDLE：

第一场演出

第二届展会

---

您可以做的一件事是创建一个布尔标志（

animationRunning

），当动画运行时，该标志被设置为

true

。然后，当您将鼠标悬停在图像上时，只需检查标志的值：如果

animationRunning==true

，则不要执行任何操作。如果

animationRunning==false

，则运行动画。

我最终使用了stop（），并将其设置为使悬停动作在函数中，并且仅在动画完成后才启动

$(".test").hover(function () {
    $(".fp1").stop(true).css("display", "none");
    $(".test").stop(true).animate({
        width: "120px"
    }, 500);
    $(".fp2").stop(true).fadeIn(1000, function () {});

---

更新后的JSFIDLE在此处显示了所有内容

，或者使用FIDDLE更新您的代码。它已更新，对此表示抱歉。自从我使用stackoverflow以来，他们就一直让链接我最初的Fiddle变得非常困难，只是使用CSS转换而不是jQuery动画。这似乎是一个完美的解决方案，但我无法让这个概念发挥作用。你能看看更新后的布尔值，看看它是否正确吗。

$(".test").hover(function () {
    $(".fp1").stop(true).css("display", "none");
    $(".test").stop(true).animate({
        width: "120px"
    }, 500);
    $(".fp2").stop(true).fadeIn(1000, function () {});