0

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

我有 3 个图像在 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
4

1 回答 1

0

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

例子：

$(this).find('img').stop(true,true).animate(...);
于 2013-04-07T08:55:44.530 回答