如何在Jquery中停止动画效果( stop方法)

Question

我是Jquery的新手，我正在尝试制作动画，但我不知道如何停止动画。

我有3张图片，它们的高度或宽度在3个锚标签中不相等，它们堆叠在一个div中。

我写了一个脚本，当你鼠标输入()一个图片时，图片的宽度应该增加20px，当你鼠标离开()时，宽度应该达到预览的宽度。

我设法做到了这一点，但是当我用鼠标快速浏览图像时，开始变大和变小，布局变得混乱。

我找到了一些插件，可以做我需要的，但它们都使用相同宽度和高度的图像。

如果有人能帮上忙，我将不胜感激。

以下是代码http://jsfiddle.net/ClaudiuTicu/9kTft/2/的链接

 var original_w;
$('.getBigger').on('mouseenter', function () {
    original_w = $(this).find('img').width(); //add the width of thye image to the parent
    original_h = $(this).find('img').height(); //add the height to the parent

    if ($(this).find('img').is(':animated')) { }
    else {
        if ($(this).attr('style')) { } //has the style attribut
        else {
            $(this).css({
                'width': original_w,
                'height': original_h
            });
        } //dosen't have the style attribut
    }

    if ($(this).find('img').width() == original_w) {
        $(this).find('img').animate({
            'width': original_w + 20
        }).addClass('hovered');
    } //if the image width is equal with the parent's width
    else {

    }


}).on('mouseleave', function () {
    if ($(this).find('img').width() != original_w) {
        $(this).find('img').animate({
            'width': original_w
        }).removeClass('hovered');
    }
    console.log(original_w);
}); //end mouse leave

Answer 1

在所有.animate()实例之前使用.stop(true,true) -它强制动画进入其最终状态，并移除所有排队的动画。

示例：

$(this).find('img').stop(true,true).animate(...);