Question

我正在使用这个代码和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

Answer 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>

Answer 2

我使用.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

jQuery在MouseOver / MouseOut上放大/缩小特定图像

2 个答案: