-1

私はプログラミングが初めてですshow/hide。jquery効果でdivを作成したいと思います。

私には2つの<div>要素があります

1. <div class="div1">
2. <div class="div2">----> hidecssで設定しました（display：none）

これは私の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

4

5 に答える 5

4

アニメーション成功コールバック関数を使用する必要があります。

$(document).ready(function(){

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

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

});
于 2012-06-03T10:19:25.457 に答える
1

I'd suggest the following:

$('.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.

Also, your original code had some problems, for example: $(".div1").show(); selects all elements of class="div1", none of which are present in your HTML; what you have got is id="div1", which requires the $('#div1') selector type.

References:

于 2012-06-03T10:30:22.053 に答える
0 
$(".div1").slideToggle('fast',function(){
   $(".div2").slideToggle('slow');
});

jQuery エフェクトには、エフェクトが完了したときに実行されるコールバックがあります。div1 でのエフェクトが終了したときに div2 でエフェクトを実行すると、完了です。

于 2012-06-03T10:21:01.940 に答える
0

これを試して：

$('.show_div_2').click(function(){
$(".div1").slideToggle('fast', function(){
  $(".div2").slideToggle('slow');
});
});
于 2012-06-03T10:21:25.477 に答える
0

次のように、slideToogle() 関数にコールバック関数を追加できます。

$(".div1").slideToggle('fast', function() {
   // this function is called when the div1 slideToogle function is done
    $(".div2").slideToggle('slow'); 
});
于 2012-06-03T10:21:38.137 に答える