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 に答える