Question

我是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

Answer 1

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

示例：

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

如何在Jquery中停止动画效果（stop方法）

1 个答案: