5個div替換對方onclick

Question

我有一個div的jquery動畫片替換對方，它工作得很好，但是當點擊黑色塊（mydiv1）時，它不會返回到原來的位置？

檢查此鏈接jquery_animation_divs

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.nn').click(function(){ 
      var l = $(this).css('left'); 

      $(this).animate({ 
       left: '-=' + l 
      }, 1500, "easeOutBounce", function(){ 
       // callBack 
       $("#divmain").css("background-color", $(this).css("background-color")); 
      }); 

      $('.ff').animate({ 
       left: '+=' + l 
      }, 1500, "easeOutBounce", function() { 
       // callBack 
      }); 

      var ff = $('.ff'); 
      ff.removeClass('ff').addClass('nn'); 

      $(this).removeClass('nn').addClass('ff'); 
     }); 
    }); 
</script> 

Answer 1

您正在使用.bind()（通過.click()），它只適用於在您運行事件綁定代碼時與選擇器匹配的元素。您希望使用.delegate()或.live()，以便黑色塊將包含在匹配元素集中。

這裏是你的確切代碼.click(一個通過的jsfiddle取代.live('click',：http://jsfiddle.net/Uv2GE/

Answer 2

當文檔加載時，黑方擁有一流的「FF」，而不是「NN」，所以click處理程序永遠不會適用於它。

更換

 $('.nn').click(function() { 

與

 $('.nn').live("click",function() { 

，它會正常工作。

Answer 3

看起來您從未將點擊事件添加到myDiv1。當你第一次加載頁面功能$(document).ready(function()是設置所有.nn類點擊功能，但當你改變.ff爲.nn類它沒有一個點擊功能。