2

修正が必要な画像アニメーションの問題があります。ユーザーが画像にカーソルを合わせると、画像のサイズが大きくなります。ユーザーが画像から移動すると、画像は元のサイズに戻ります。

問題:ユーザーが画像の上をすばやく移動すると、画像が拡大して歪み始めたり、まったく異なるサイズに変化したりします。その後、マウスが画像上にない間、アニメーションを続けます。

これが問題のJSFiddleです

mouseoverメソッドでandmouseoutイベントを使用すると、同じ問題が発生しました.on()。.on()また、これらのイベントをメソッドで連鎖させている間

HTML:

<div id="content">
<img id="foo" src="http://www.nasa.gov/images/content/297522main_image_1244_946-710.jpg"  alt="" title="" />

jQuery:

jQuery('#content').on("hover", '#foo', function (e) {
    var $img = jQuery(this);
    var $imgWidth = $img.width();
    var $imgHeight = $img.height();
    var $imgTop = $img.position().top;
    if (e.type == "mouseenter") {
        $img.animate({
            top: $imgTop - 20,
            width: $imgWidth * 1.2,
            height: $imgHeight * 1.2
        }, 200);
    } else if (e.type == "mouseleave") {
        $img.animate({
            top: $imgTop + 20,
            width: $imgWidth / 1.2,
            height: $imgHeight / 1.2
        }, 200);
    }
});
4

1 に答える 1

4

画像がアニメーション化されている間でも、画像にカーソルを合わせるたびに画像の幅と高さを取得しているため、現在の値は実際には必要なものではありません。

代わりに、元の値を保存して、それらに取り組みます。

jQuery('img').load(function() {
    var $this = jQuery(this);

    $this.data({
        'orig-width': $this.width(),
        'orig-height': $this.height(),
        'orig-top': $this.position().top
    });
});

jQuery('#content').on("hover", '#foo', function(e) {
    var $this = jQuery(this);

    if (e.type == "mouseenter") {
        $this.stop().animate({
            top: $this.data('orig-top') - 20,
            width: $this.data('orig-width') * 1.2,
            height: $this.data('orig-height') * 1.2
        }, 200);
    } else if (e.type == "mouseleave") {
        $this.stop().animate({
            top: $this.data('orig-top'),
            width: $this.data('orig-width'),
            height: $this.data('orig-height')
        }, 200);
    }
});​

デモ: http://jsfiddle.net/TbDrB/5/

于 2012-10-30T17:30:15.680 に答える