2011-12-10 16 views
1

#login_wrapと呼ばれるdivがあり、これはちょっとした泡のようです。私はこのdivがフェードインしてjQueryを使用してドロップする必要があります。div要素でフェード&ドロップする方法

私が説明しようとしている効果は、フェードインダウンの効果がFading entrances by Dan Edenに非常に似ています。私は彼のCSSバージョンを使用するだろうが、それは私のために働いているようではないと私は完全にブラウザと互換性があるとは思わない。

答えて

1

Working demo (jsBin)

CSS:

#element{ 
    display:none; 
    margin-top:-15px; 
    opacity:0; 
} 

jQの:

$('#element').css({display:'block'}).animate({marginTop:'0px', opacity:'1'},500); 
+0

はあなたに男をありがとう、私はいつもあなたのスキルを頼りにすることができ;) – Farreal

+0

@Dan :)私はしました質問の下であなたの名前を見て、すべての答えを見て...と言った:私の古い友達を助けよう!おかげでダンは、 –

+0

の周りを参照してくださいハハの声援男! :) ちょうど1つの問題を抱えている、私はアニメーション化しているdivのすぐ下にあるshadow_divと呼ばれるdivに置かれた影の画像を持っています。しかし、影はボックスで動いているようですが、shadow divの位置を固定して動かないようにして、login_area divのみをアニメーション化する方法はありますか? – Farreal

0
if(condition){ 
jQuery('#login_wrap').fadeOut("normal",function(){ 

// to do something 
}); 
}else{ 
jQuery('#login_wrap').fadeIn("normal",function(){ 
// to do something 
}); 
} 

が、これはあなたを助けることを願っています。

0

は、現時点では出てこのコードをテストすることはできませんが、私はあなたがしかし、上記のためのjQuery UIライブラリを使用する必要があるとしていることが

$('#login_wrap').show("drop", { direction: "down" }, 1000); 

だろうと信じて:http://jqueryui.com/demos/show/

あなたの場合あなたは単に

$('login_wrap').fadeIn(); 
0

にフェードインすることができますよりも、それを使用したくない私はあなたが何を意味するかそれを取る「fadeInDown」である そのような場合、どのようにこのことについて(入力ボタンのonclickの中に何があるか確認してください):

つまり
<html> 
    <div id="login_wrap" style="position: absolute; border: 3px solid black; margin: 10px; padding: 10px;"> 
    Watch This! (your login_wrap stuff) 
    </div> 
    <input type="button" onclick="$('div').css('opacity', 0).css('top', -20); $('#login_wrap').animate({top: '20', opacity: 1});" value="Animate" style="float: right;"/> 
</html> 


まず、私は私が使用している高と目に見えない
セカンドをlogin_wrap作るために(.css()を使用)、CSS値を設定しています.animate({top: '20', opacity: 1})はDIVの下に移動し、作ってそれ見える

0

ダウン+は50px

によって フェードインとして動作するこの方法を試してみてください
関連する問題