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

Question

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

我在 3 个 anchor 标记中有 3 个高度或宽度不相等的图像，它们堆叠在一个 div 中。

我写了一个脚本，当你 mouseenter() 一个图像时，图像的宽度应该增加 20px，当你 mouseleave() 时，宽度应该达到预览宽度。

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

我找到了一些可以满足我需要的插件，但它们都使用等宽和等高的图像。

如果有人能提供帮助，我将不胜感激。

这里是一个链接，代码为 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(...);