0

このチュートリアルを使用してフリップ ウォールを作成しています: http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/

チュートリアルでは、flip 要素は .click イベントによってトリガーされます。これを .mouseover イベントに変更したいと思います。

ここで .mouseover イベントを使用してデモをセットアップしました。ただし、画像にカーソルを合わせてマウスを少し動かすと、画像が反転します。

ここに私のjsがあります:

編集:更新されたコード

$(document).ready(function(){
var valid = false;
$('.sponsorFlip').bind("mouseenter",function(){
    elem = $(this);
    if(!valid){ 
        // Using the flip method defined by the plugin:

        elem.flip({
            direction:'lr',
            speed: 250,
            onBefore: function(){
                // Insert the contents of the .sponsorData div (hidden from view with display:none)
                // into the clicked .sponsorFlip div before the flipping animation starts:

                elem.html(elem.siblings('.sponsorData').html());
            }
        });

        // Setting the flag:
        elem.data('flipped',true);
        valid = true;
    }
});

$('.sponsorFlip').bind("mouseleave",function(){
    elem = $(this);

    elem.revertFlip();
    valid = false;
});

}); 

マウスを少し動かしたときに反転するのを防ぐ方法を知っている人はいますか? マウスがその要素を離れるまで、要素を反転したままにしたいと思います。

フィドル追加http://jsfiddle.net/csdQB/2/

4

1 に答える 1