同時使用切換和淡入淡出的問題

<!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元素時，我希望它被圖像取代。有人能告訴我我要去哪裏嗎？同時使用切換和淡入淡出的問題

來源

2012-02-17 Cafecorridor

什麼是目前出錯？ – 2012-02-17 08:43:26

您正在使用toggle（）錯誤，請參閱http://api.jquery.com/toggle/ – Stefan 2012-02-17 08:46:11

Stefan，我指的是本書中的JQuery in Action，它給出了另一種切換語法，在鏈接中未提及共享。 toggle（偵聽器1，偵聽器2，...）將傳遞的函數建立爲包裝集的所有元素上的單擊事件處理程序的循環列表。在隨後的每個點擊事件中都會按順序調用處理程序。參數 listenerN（功能）用作後續點擊次數爲的點擊事件處理程序的一個或多個函數。退貨包裝的集合。 – Cafecorridor 2012-02-17 08:51:15

您toggle()方法的鏈接是不正確，以及你同時擁有click()處理器與toggle() iside它的事實 - 試試這個來代替：

$("#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 2012-02-17 10:03:28

你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 2012-02-17 10:03:12

同時使用切換和淡入淡出的問題

回答

相關問題