如何在执行新的动画之前停止Jquery中的所有先前动画？ [英] How to stop all previous animations in Jquery before executing new one?

问题描述

我只是在尝试使用JQuery。

I am just experimenting something with JQuery.

我有一张图片以 mouseOver（）发生并淡化回 mouseOut（）

I have an image which fades into another image as mouseOver() occurs and fades back on mouseOut()

除非你将鼠标移动，否则效果很好链接一次又一次，说5次，图像反复淡入淡出，5次，而你只是坐在那里等待它克服这种疯狂的行为。

It works great, except if you are moving your mouse over the link again and again, say 5 times, the image fades in and out repeatedly, 5 times while you just sit there and wait for it to get over with this crazy behaviour.

为了阻止这种行为，我尝试使用一个标志并仅在它尚未动画时启动动画，但是，猜猜是什么？如果，比方说，我有4个这样的按钮，并且在每个按钮上鼠标悬停我正在淡化在另一个图像中，该动画将被忽略，因为该标志是假的。

To stop this behaviour, I tried to use a flag and start the animation ONLY if it isnt already animating, but, guess what? If, say, I have 4 such buttons, and on each button mouseover i am fadingIn a different image, that animation will be ignored since the flag is false.

所以是有没有办法在执行新的动画之前停止所有以前的动画？
我在谈论JQuery中正常的 fadeIn（）和 slideDown（）函数

so Is there a way to stop all the previous animations before executing new ones? I am talking about the normal fadeIn() and slideDown() functions in JQuery

编辑：从链接添加代码。

<a href="javascript:void(0);" onMouseOver="mouseOverOut(false);" onMouseOut="mouseOverOut(true);">Tick</a>

javascript

javascript

function mouseOverOut(t)
{
    if(t)
    {
        $('.img1').fadeIn();
        $('.img2').fadeOut();
    }
    else
    {
        $('.img1').fadeOut();
        $('.img2').fadeIn();
    } 
}

推荐答案

使用带有 fadeIn / Out 的 .stop（）会导致不透明度陷入部分状态。

Using .stop() with fadeIn/Out can cause the opacity to get stuck in a partial state.

一种解决方案是使用 .fadeTo（）代替，它给出了不透明度的绝对目的地。

One solution is to use .fadeTo() instead, which gives an absolute destination for the opacity.

function mouseOverOut(t) {
    if(t) {
        $('.img1').stop().fadeTo(400, 1);
        $('.img2').stop().fadeTo(400, 0);
    }
    else {
        $('.img1').stop().fadeTo(400, 0);
        $('.img2').stop().fadeTo(400, 1);
    } 
}

这是一种较短的写作方式。

Here's a shorter way of writing it.

function mouseOverOut(t) {
    $('.img1').stop().fadeTo(400, t ? 1 : 0);
    $('.img2').stop().fadeTo(400, t ? 0 : 1);
}

或者这可能有效。不过要先测试一下。

Or this may work. Test it first, though.

function mouseOverOut(t) {
    $('.img1').stop().fadeTo(400, t);
    $('.img2').stop().fadeTo(400, !t);
}

编辑：这最后一个似乎有效。 true / false转换为1/0。您也可以直接使用 .animate（）。

function mouseOverOut(t) {
    $('.img1').stop().animate({opacity: t});
    $('.img2').stop().animate({opacity: !t});
}

这篇关于如何在执行新的动画之前停止Jquery中的所有先前动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！