Question

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

我有两个<div>个元素，

1。<div class="div1">
2。<div class="div2"> ----＆gt;我在我的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 ??? 换句话说，我希望在div2隐藏后显示div1。

请帮帮我.... 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 Fiddle demo

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

参考文献：

jQuery的：
- click()。
- fadeIn()。
- fadeOut()。
选择器：
- CSS Selectors。
- jQuery Selectors。

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

用jquery显示隐藏内容

5 个答案: