CODEWITHSUNDEEP
jquery
Hellodan
Hellodan

Reputation: 1208

How Do I Fade & Drop In A Div Element

I have a div called #login_wrap which looks a bit like an speech bubble. I need this div to fade in and drop into place with jQuery.

The effect I am trying to describe would be very much like the Fade In Down effect under Fading entrances by Dan Eden. I would use his CSS version but it doesn't seem to be working for me and I don't think its fully browser compatible anyway.

Upvotes: 1

Views: 1363

Answers (5)

Roko C. Buljan
Roko C. Buljan

Reputation: 206353

Working demo (jsBin)

CSS:

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

jQ:

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

Upvotes: 1

jcuenod
jcuenod

Reputation: 58435

I take it what you mean is "fadeInDown" If that's the case, how about this (check what's in the onclick of the input button):

<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>

In other words:
First I'm setting the css values (using .css()) to make login_wrap higher and invisible
Second I'm using .animate({top: '20', opacity: 1}) to move the div down and make it visible

Upvotes: 0

Siva Charan
Siva Charan

Reputation: 18064

Try this way, which acts as FadeIn Down by +50px

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


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

Upvotes: 0

dku.rajkumar
dku.rajkumar

Reputation: 18578

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

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

hope this will help you.

Upvotes: 0

Yura Kondratov
Yura Kondratov

Reputation: 21

Can't test this code out at the moment but I believe it would be

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

You are going to need to use the jquery ui library for the above however: http://jqueryui.com/demos/show/

If you do not want to use it than you can just simply fade in

$('login_wrap').fadeIn();

Upvotes: 0

Related Questions