マウスオーバー機能を使用しようとすると無限ループエラーが発生する

Question

これは数日間最後まで夢中になってしまった。私はJQueryでそれほど便利ではありません。私がやろうとしています何

http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/

はどこのMouseEnter上に画像を反転する関数を作成することであり、mouseleaveに、画像は元の状態に反転します： 私は担当ウォールプラグインを使用しています。

今は無限ループエラーが発生しています。

私はここに掲載いくつかのソリューションをしようが、我々は

:-(運これは私のコードではありません。誰かが助けることができるならばそれは素晴らしいことだろう。

はどうもありがとうございました!!!

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

$('.sponsorFlip').bind("mouseover",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: 

     elem.flip({ 
      direction:'tb', 
      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); 
    } 
}); 

}); 

Answer 1

編集：私は謝罪、私あなたの前のコードを誤読み

は、あなたが「MouseEnterイベント」と「mouseleave」を、むしろトン使用することを検討しなかった（私はそれが「マウスオーバー」である「MouseEnterイベント」を見ました）ハンマウスオーバー？これにより、if/else条件付きではなくロジックを分離し、適切にイベントを処理できます。以下のような

何か：

$(document).ready(function() { 
    $('.sponsorFlip').bind({ 
     /* FLIP ON ENTER */ 
     'mouseenter': function(e){ 
      var $el = $(this); 
      $el.flip({ direction: 'lr', 
       speed: 350, 
       onBefore: function() { 
       $el.html($el.siblings('.sponsorData').html()); 
       } 
      }); 
     }, 
     /* REVERT ON LEAVE */ 
     'mouseleave': function(){ 
       var $el = $(this); 
       $el.revertFlip(); 
      } 
     });   
    }); 

はここJSフィドルです：http://jsfiddle.net/gX2WY/2/

（私は、エラーを防ぐために、JSのフィドルからフリップ/ revertFlipを削除 - しかし概念があります！）

編集：（私のコメントより読むのがより簡単です） 私は、変更したJSのフィドルへのリンクです：http://jsfiddle.net/VJsrj/ 変更を加えたジップへのリンクです：http://www.box.com/s/v5ov3tl09xhr6gf1cj78

注意すべき点 - Flipプラグインには、 "revertFlip"メソッドに関するいくつかの欠点があります。具体的には、アニメーション化するときに呼び出されるファンではありません。私は、そのメソッドが呼び出されることを延期するロジックをいくつか持っていましたが（アニメーション中にマウスを外した場合）、最終的にそれを削除することに決めました（他のいくつかの問題が発生しました）。

将来のために）あなたのビジュアルのためのCSSを検討しており、サポートされているブラウザであなたのサイトを閲覧しているユーザーのためにその経験を徐々に "強化"しています。例えば

：

http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html

このページには、すべての最新ブラウザで機能的であるが、WebKitのベースのブラウザ（クローム/サファリ）で余分なクールです - あなたは基本的なを持っていることによって同様の動作を模倣することができ " ：ホバー "とそれをサポートするブラウザのためにそれを拡張！

幸運を祈る！その他の質問がある場合はお知らせください:)

Answer 2

あなたはmouseoutイベントをバインドする必要があります！

Answer 3

.bind()への電話番号が間違っています。あなたはjQueryの1.7以上を使用している場合

$('.sponsorFlip').bind(mouseover: function(){ 
    ... 

しかし、あなたが.on()代わりの.bind()を使用することをお勧めします：これを試してみてください。ここで.on()の例です：

$('.sponsorFlip').on("mouseover",function(){ 
    ... 

また、あなたは、コードの前半にelem.data('flipped',false)後にセミコロンを逃しています。厳密には必須ではないかもしれませんが、場合によってはそこにポップすることもできます。