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

Question

我想在單擊以隱藏div時顯示圖像。一切正常，但我想在show 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的加載圖像。

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 ， 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文檔： http : //api.jquery.com/animate/

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
           }
        });
      });
   });