ToggleとFadeInを同時に使用する際の問題

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Fact</title> 

    <style type="text/css"> 

    #fact_box { 
     height: 200px; 
     width: 200px; 
     color: blue; 
     border-style: dotted; 
     position: relative; 
    } 


    .replace { 
     height: 200px; 
     width: 200px; 
    } 

    </style> 
    <script type="text/javascript" src="jquery-1.4.js"></script> 
    <script type="text/javascript"> 

$(function() { 
    $("#fact_box").click(function() { 
     $(this).toggle(function() { 
      $(".box_image").fadeOut().replaceWith('<div class="replace">' + "Superman Returns" + '</div>'); 
     }, function() { 
      $(".replace").fadeIn().replaceWith('<img class="box_image" src="http://www.pxleyes.com/images/tutorials/ext//4b757ff47d682.jpg" width="200px" height="200px"/>') 
     }); 
    }); 
}); 

    </script> 
    </head> 

    <body> 
    <div id="fact_box"> 
    <img class="box_image" src="http://www.pxleyes.com/images/tutorials/ext//4b757ff47d682.jpg" width="200px" height="200px"/> 
    </div> 
    </body> 
</html>

こんにちは、私はJQueryコードのデバッグにいくつかの助けが必要です。画像をクリックすると、フェードアウトしてdiv要素に置き換えます。次にdiv要素をクリックすると、その要素が画像に置き換えられます。誰かが私がどこに間違っているか教えてくれますか？ToggleとFadeInを同時に使用する際の問題

は

出典

2012-02-17 Cafecorridor

現在何が問題になっていますか？ –

あなたはtoggle（）を間違って使っています。http://api.jquery.com/toggle/ – Stefan

Stefan、私はこの本のJQuery in Actionを参照しています。リンクには言及されていない別の構文のトグルがあります共有。トグル（listener1、listener2、...）ラップセットのすべての要素でクリックイベントハンドラの循環リストとして渡された関数を設定します。各後続のクリックイベントでハンドラが順番に呼び出されます。パラメータ listenerN（機能）以降のクリックのクリックイベントハンドラとして機能する1つ以上の機能。戻り値ラップされたセット。 – Cafecorridor

あなたtoggle()方法のチェーンが正しくないだけでなく、あなたがそれイジーデtoggle()とclick()ハンドラの両方を持っているという事実である - 代わりにこれを試してみてください。

$("#fact_box").toggle(
    function() { 
     $(".box_image", this).fadeOut(500, function() { 
      $(this).replaceWith('<div class="replace">Superman Returns</div>'); 
     }); 
    }, 
    function() { 
     $(".replace", this).fadeOut(500, function() { 
      $(this).replaceWith('<div class="box_image"></div>'); 
     }); 
    } 
);

Example fiddle

出典

2012-02-17 09:22:07

助けてくれてありがとう。 – Cafecorridor

あなたshouldn't clickとtoggleの両方をバインドしてください。

$(function() { 
    $("#fact_box").toggle(function() { 
      //console.log('even'); 
      $(".box_image").fadeOut().replaceWith('<div class="replace">' + "Superman Returns" + '</div>'); 
     }, function() { 
      //console.log('odd'); 
      $(".replace").fadeIn().replaceWith('<img class="box_image" src="http://www.pxleyes.com/images/tutorials/ext//4b757ff47d682.jpg" width="200px" height="200px"/>') 
     }); 
});

要素を置き換える前に、アニメーションを終了するためにコールバック関数を使用することをお勧めします。

出典

2012-02-17 09:26:10 Stefan

助けてくれてありがとう。 – Cafecorridor

ToggleとFadeInを同時に使用する際の問題

答えて

関連する問題