如何淡入淡出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元素

回答

相关问题