jquery animateの後に見えないdivを表示する

hidden javascript jquery jquery-animate

だから私はjqueryでアニメーションの後に見えないdivを表示する方法を見つけようとしている。 これがdivを表示するコードです。

$( '#box_green').css({visibility: "visible"、opacity:0}).fadeIn( 'slow');

divを見えなくするcss。

div#box_green {背景画像:URL(../ images / bg_stripe_green.png); background-repeat:繰り返します。幅:478ピクセル。高さ:300ピクセル。位置:絶対上:249ピクセル。 z指数:20。可視性:隠されています。 }

そしてクリックのアニメーション:

$(document).ready(function(){

$( "#menu_h、#menu_p、#menu_q、#menu_b、#menu_c")。one( 'クリック'、function(){$( "#menu_h")。animate({"left": "= 419px"} 、 "slow"); $( "#menu_p")。animate({"left": "= 313px"}、 "slow"); $( "#menu_q")animate({"left": "= 210px) "}、" slow "); $("#menu_b ")。animate({" left ":" = 104px "}、" slow "); $("#menu_c ")animate({" left ":" = 0px "}、"遅い "); $("#menu_h、#menu_p、#menu_q、#menu_b、#menu_c ")。バインド解除( 'クリック');});

;));

#menu_h`アニメーションが終了した後にbox_green divが表示されるようにするにはどうすればいいですか? box_greenを再びフェードアウトした後に(box -green divと同じ効果で)非表示の `#box_yellow divも表示できるようにするにはどうすればいいですか(それを再び見えなくします)。 私は実際に5つのdiv(box_greenとbox_yellowはそれらのうちの2つ)を持っています。それらは「現在表示されているdivをオフにしてdiv clickedを表示する」イベントを持つ必要があります。

  2  0


ベストアンサー

あなたは `callback`を実装する必要があるでしょう。

_
コールバック関数の使用例。 最初の引数はCSSプロパティの配列です。2番目の引数はアニメーションの完了までに1000ミリ秒かかることを指定し、3番目の引数はイージングタイプを示し、4番目の引数は無名コールバック関数です。
_

$("p").animate({
       height:200, width:400, opacity: .5
    }, 1000, "linear", function(){alert("all done");} );

`function(){alert(” all done “);}`をあなた自身の関数に置き換えて、何かを出現させたり消したりします。 😛

5


要素のCSSで遊ぶのではなく、 show`と hide`関数を使うこともできますし、同じ要素を表示/隠すのなら `toggle`さえも使えます。

0


タイトルとURLをコピーしました