如何在show hide div期間加載圖像？

Question

我想要顯示一個圖像，當我要點擊隱藏一個div。一切正常，但我想提醒一條消息，並在顯示div之前加載圖像。該怎麼辦？我的js和html代碼如下：

<h3><a class='show'> (Show/Hide) </a></h3> 
<div id="show"></div> 

和我的js代碼

jQuery(document).ready(function() 
{ 
    $("a.show").click(function(e) { 
    // alert("Hi"); 
    $('#check').animate({ opacity: "toggle" }); 
    e.stopPropagation(); 
    }); 
}); 

我想添加一個警報消息和一個名爲loading.gif.Any想法加載圖像？

Answer 1

你能做到這一點順序如下：FadeOut，顯示圖像和最後FadeIn

$("#check").fadeOut("slow", function() { 
    // Animation complete 
    }); 

http://api.jquery.com/fadeOut/ 和 http://api.jquery.com/fadeIn/

Answer 2

jQuery的animate是一個強大的工具：show，hide，fadeIn，fadeOut， slideUp，slideDown,fadeTo,fadeToggle（以及其他我無法忍受的）僅僅是具有特定參數的animate的快捷方式（非常類似於$.ajax到$.post,$.get）。

傳遞迴調火災關閉動畫完成時，非常喜歡你會show和hide做到這一點：

$("#a").click(function() { 
    $("#b") 
    .animate({ borderLeftWidth: "15px" }, 1000, "linear", function() { 
     //callback -> animation complete 
     alert("all done"); 
    }); 
}); 

你甚至可以鏈animate多個呼叫。一個回調可以綁定到每個調用animate，使其非常複雜（和容易出錯）。

$("#a").click(function() { 
    $("#b") 
    .animate({ width: "90%" }, 1000) 
    .animate({ fontSize: "24px" }, 1000) 
    .animate({ borderLeftWidth: "15px" }, 1000, "linear", function() { 
     //callback -> this particular action has been completed 
     alert("all done"); 
    }); 
}); 

根據經驗法則，使簡單:)

見jQuery的文檔獲取更多信息：

Answer 3

jQuery(document).ready(function() 
    { 
     $("a.show").click(function() { 
     $('#check').fadeToggle('slow', function(){ 
      if($('#check').css('display') == 'none') 
      { 
      //if #check is hidden 
      } 
      else 
      { 
      //if #check is shown 
      } 
     }); 
     }); 
    });