如何淡入淡出div元素

我有一個名爲#login_wrap的div，看起來有點像演講泡泡。我需要這個div淡入，並與jQuery放在一起。如何淡入淡出div元素

我想描述的效果非常類似於在Fading entrances by Dan Eden下的淡入淡出效果。我會使用他的CSS版本，但它似乎並沒有爲我工作，我不認爲它完全兼容瀏覽器。

2011-12-10 Farreal

CSS：

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

JQ：

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

來源

2011-12-10 16:06:22

謝謝你的人，我總是可以指望你的技能;） – Farreal

@丹:)我有在問題下看到你的名字，並看到所有答案......並說：讓我們來幫助我的老朋友！謝謝丹，看到你周圍 –

哈哈歡呼的人！ :) 剛剛得到一個問題，我有一個陰影圖像放在一個名爲shadow_div的div，它直接在im動畫的div下面。然而，陰影似乎與框移動，有沒有辦法我可以修復陰影div的位置，所以它不會移動，只動畫login_area div？ – Farreal

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

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

希望這會幫助你。

來源

2011-12-10 15:12:25

不能出測試此代碼的時刻，但我相信這將是

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

你將需要使用jQuery用戶界面庫，但上述：http://jqueryui.com/demos/show/

如果您不想使用它比你可以只是簡單的

$('login_wrap').fadeIn();

來源

2011-12-10 15:18:32

我想你的意思是「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>

換句話說：
首先，我設置的CSS值（使用.css()），使login_wrap更高，無形
其次我使用.animate({top: '20', opacity: 1})移動DIV下來並使其可見

來源

2011-12-10 15:32:33 jcuenod

嘗試這種方式，通過+ 50像素

向下作爲淡入

來源

2011-12-10 15:36:26

如何淡入淡出div元素

回答

相關問題