Question

我有一个名为#login_wrap的div，看起来有点像讲话泡泡。我需要这个div来淡入并使用jQuery放入到位。

我试图描述的效果非常类似于Fading entrances by Dan Eden下的淡化效果。我会使用他的CSS版本，但它似乎并不适合我，我认为它完全不兼容浏览器。

Answer 1

CSS：

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

JQ：

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

Answer 2

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

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

希望这会对你有所帮助。

Answer 3

目前无法测试此代码，但我相信它会是

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

您将需要使用jquery ui库来实现上述目标：http://jqueryui.com/demos/show/

如果您不想使用它，只需简单地淡入

即可

$('login_wrap').fadeIn();

Answer 4

我认为你的意思是＆＃34; fadeInDown＆＃34; 如果是这样的话，那怎么样（检查输入按钮的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移动并使其可见

Answer 5

尝试这种方式， + 50px

FadeIn Down

<button id="top">FadeInDown</button>
<div class="block"></div>


$("#top").click(function(){
  $(".block").removeAttr("style").animate({"top": "+=50px"}, "slow");
});

我如何淡化＆amp;放下Div元素

5 个答案: