0

我将此代码与 jquery 一起使用来放大或隐藏 HOVER 上的图像（图像）。

该脚本工作得很好，除了如果用户非常快速地移动图像上的光标，脚本会不断放大图像。

所以我想避免这种情况并有办法正确停止动画。知道如何解决这个问题吗？非常感谢！

// Enlarge/Shrink a specific image on MouseOver/MouseOut
            $('#photos').find('img').hover(function() {
                // Get size for selecte image
                $this = $(this);
                originalWidth = $this.width();
                originalHeight = $this.height();
                scale = 20;
                speed = 250;
                newWidth = originalWidth + originalWidth/100*scale;
                newHeight = originalHeight + originalHeight/100*scale;
                $this.animate({         // Enlarge image on MouseOver
                    width : newWidth,
                    height : newHeight
                    },speed);
                }, function () {        // Shrink image on MouseOut
                $this.animate({
                    width : originalWidth,
                    height: originalHeight
                    },speed);
            }); // end hover
4

2 回答 2

1

你应该用css来做。试试这个：

<style>
    #photos img {
        width: 100%;
        height: 100%;
        transition: width 2s, height 2s, transform 2s;
        -moz-transition: width 2s, height 2s, -moz-transform 2s;
        -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
        -o-transition: width 2s, height 2s,-o-transform 2s;
    }
    #photos img:hover {
        width: 200%;
        height:200%;
    }
</style>
<div id="photos">
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
</div>
于 2012-08-01T20:14:11.757 回答
0

我在这里使用 .stop() 函数解决了这个问题.stop() ，它只是在开始一个新动画之前结束 img 上的任何动画，并防止多个动画在队列中堆积。

// Enlarge/Shrink a specific image on MouseOver/MouseOut
        $('#photos').find('img').hover(function() {
            // Get size for selecte image
            $this = $(this);
            originalWidth = $this.width();
            originalHeight = $this.height();
            scale = 20;
            speed = 250;
            newWidth = originalWidth + originalWidth/100*scale;
            newHeight = originalHeight + originalHeight/100*scale;
            $this.stop().animate({          // Enlarge image on MouseOver
                width : newWidth,
                height : newHeight
                },speed);
            }, function () {        // Shrink image on MouseOut
            $this.stop().animate({
                width : originalWidth,
                height: originalHeight
                },speed);
        }); // end hover
于 2012-08-01T20:13:05.447 回答