3

特定のdivを反転するjQueryでフリッププラグインを使用しています。

コード（誰かのコードを再利用）は、クリックした後に要素を反転します。

いくつかの画像があり、この機能を使用してアニメーションを作成しようとしています。jQueryを使用してこれらの画像をクリックしています。ただし、問題は、ユーザーでも画像をクリックして、不要な画像を再度反転できることです。

CSSプロパティを使用してみました：

    body{pointer-events:none;}

これは機能しますが、アニメーションを終了した後、jQueryを使用してこれを無効にすることはできません。私は試した：

    $('body').css('pointer-events','normal');

私が再利用しているコードは次のとおりです。

$(document).ready(function() { /* The following code is executed once the DOM is loaded */


    $('.sponsorFlip').bind("click", function() {

        // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
        var elem = $(this);

        // data('flipped') is a flag we set when we flip the element:
        if (elem.data('flipped')) {
            // If the element has already been flipped, use the revertFlip method
            // defined by the plug-in to revert to the default state automatically:
            elem.revertFlip();

            // Unsetting the flag:
            elem.data('flipped', false)
        }
        else {
            // Using the flip method defined by the plugin:
            $(this).unbind("click");
            $(this).unbind("click");
            $(this).unbind("click");
            elem.flip({
                direction: 'lr',
                speed: 350,
                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);


        }
    });

});

追加してみました

    $('.sponsorFlip').unbind("click");

それも機能していません。

4

3 に答える 3

3 
$('.sponsorFlip').on('click', function(e) {
   // for a click event by mouse has e.clienX/e.clientY 
   if(e.clientX){
      // then click by mouse
   } else {
      // triggered 
   }
});

デモ (コンソールを参照)

あなたのコードのために

$('.sponsorFlip').bind('click', function(e) {
   // for a click event by mouse has e.clienX/e.clientY 
   if(e.clientX){
      // then click by mouse
   } else {
      // triggered 
   }
});

デモ (コンソールを参照)

于 2012-06-02T13:56:49.103 に答える
0

クリックイベントに割り当ててからクリックをシミュレートしてから、クリックイベントの割り当てを解除するのは、ちょっとしたハックのようです。要素を直接反転する関数を作成してみませんか？

var options = {...};
$(element).flip(options);
于 2012-06-02T14:15:35.607 に答える
0

簡単な解決策として、次の行を削除してみてください。

 // If the element has already been flipped, use the revertFlip method
        // defined by the plug-in to revert to the default state automatically:
        elem.revertFlip();

        // Unsetting the flag:
        elem.data('flipped', false)
于 2012-06-02T14:29:35.650 に答える