用jquery顯示隱藏內容

Question

我是編程新手 我想用div創建show/hide jquery效果。

我有兩個<div>元件，

1. <div class="div1">
2. <div class="div2"> ---->我在CSS設置爲hide（顯示：無）

這是我的HTML代碼：

<a href="#" class="show_div_2">Div 2</a> 

<div id="div1"> THIS IS DIV 1...</div> 

<div id="div2"> THIS IS DIV 2...</div> 

，這我javascript代碼：

$(document).ready(function(){ 
    $(".div1").show(); 

    $('.show_div_2').click(function(){ 
     $(".div1").slideToggle('fast'); 
     $(".div2").slideToggle('slow'); 
    }); 

}); 

我的問題是.. 我怎麼能把time interval帶到div1和div2 ??? 換句話說，我想在隱藏div1之後顯示div2。

請幫助我.... THX

Answer 1

您應該使用動畫成功的回調函數：

$(document).ready(function(){ 

    $(".div1").show(); 

    $('.show_div_2').click(function(){ 
    $(".div1").slideToggle('fast', function(){ 
     $(".div2").slideToggle('slow'); 
    }); 
    }); 

}); 

Answer 2

$(".div1").slideToggle('fast',function(){ 
    $(".div2").slideToggle('slow'); 
}); 

jQuery效果有所回調是什麼時，效果完成執行。如果在對div1的效果完成時在div2上運行效果，則完成。

Answer 3

試試這個：

$('.show_div_2').click(function(){ 
$(".div1").slideToggle('fast', function(){ 
    $(".div2").slideToggle('slow'); 
}); 
}); 

Answer 4

您可以添加一個回調函數，這樣的slideToogle（）函數：

$(".div1").slideToggle('fast', function() { 
    // this function is called when the div1 slideToogle function is done 
    $(".div2").slideToggle('slow'); 
}); 

Answer 5

我建議如下：

$('.show_div_2').click(
    function(e){ 
     e.preventDefault(); // prevents default action of the link element 
     var div1 = $('#div1'), // reference to the jQuery object 
      div2 = $('#div2'); 
     div1.fadeOut(// fades out the div of id="div1" 
      function(){ 
       div2.fadeIn(); /* fades in the div id="div2" once the 
            previous fadeOut has completed */ 
      }); 
    }); 

JS Fiddle demo。

此外，您的原始代碼有一些問題，例如：$(".div1").show();選擇class="div1"的所有元素，其中沒有一個出現在您的HTML中;你得到的有是id="div1"，它需要$('#div1')選擇器類型。

參考文獻：

• 的jQuery：
  • click()。
  • fadeIn()。
  • fadeOut()。
• 選擇器：
  • CSS Selectors。
  • jQuery Selectors。