Question

我只是在尝试使用JQuery。

我有一张图像会在mouseOver()出现时淡入另一张图像并在mouseOut()上淡出

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

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

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

编辑：从链接添加代码。

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

的javascript

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

Answer 1

将.stop()与fadeIn/Out一起使用会导致不透明度陷入部分状态。

一种解决方案是使用.fadeTo()代替，它为不透明度提供绝对目的地。

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);
    } 
}

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

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

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

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});
}

Answer 2

您是否已尝试stop()？

说明：停止匹配元素上当前正在运行的动画。

Answer 3

使用.stop()

如何在执行新的动画之前停止Jquery中的所有先前动画？

3 个答案: