jquery - 用jquery显示隐藏内容

Question

我是编程新手.. 我想show/hide用 jquery 效果创建 div。

我有两个<div>元素，

1. <div class="div1">
2. <div class="div2">----> 我hide在我的 CSS 中设置为（显示：无）

这是我的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之间带来？？？换句话说，我想在隐藏后显示。div1div2div2div1

请帮帮我.... thx

Answer 1

您应该使用动画成功回调函数：

$(document).ready(function(){

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

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

});

Answer 2

我建议如下：

$('.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 小提琴演示。

此外，您的原始代码存在一些问题，例如：$(".div1").show();选择 的所有元素class="div1"，但您的 HTML 中都不存在这些元素；你得到的是id="div1"，它需要$('#div1')选择器类型。

参考：

• jQuery：
  • click().
  • fadeIn().
  • fadeOut().
• 选择器：
  • CSS 选择器。
  • jQuery 选择器。

Answer 3

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

jQuery 效果有一个回调，当效果完成时执行。如果在 div1 上的效果完成后在 div2 上运行效果，则完成。

Answer 4

尝试这个：

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

Answer 5

您可以像这样向 slideToogle() 函数添加回调函数：

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