CODEWITHSUNDEEP
jqueryweb
Chiggins
Chiggins

Reputation: 8397

Having divs "float" around

Sorry for the vague title, I can't really figure out another way to name it.

If you take a look at my page, and click the button that says "hi", it'll make the top box disappear, and the bottom box take its place. Now, when the bottom box moves up top, it does it in an instant. How can I get it so that once the top box disappears, the bottom box "floats" up there, gracefully. Any good way with jQuery that I could accomplish it?

You can see a fiddle here: http://jsfiddle.net/UBEmx/2/

Upvotes: 2

Views: 143

Answers (2)

Abe Miessler
Abe Miessler

Reputation: 85116

I would just use a slideToggle instead of a fadeToggle. This way your jQuery stays almost exactly the same and you keep your on/off click functionality. You can see it in action here:

http://jsfiddle.net/UBEmx/1/

If you change your min-height in the box class to just height, you get a MUCH better animation.

css:

.box 
{
   background-image: url("/new/public_html/img/BlackFadedBG.png");
   border: 2px solid black;
   max-height: 400px;
   max-width: 600px;
   height: 200px; /*here*/
   min-width: 300px; 
}

javascript:

$("#click").click(function() {   
  $("#box-1").slideToggle();  
});

Upvotes: 2

Rob Rodi
Rob Rodi

Reputation: 3494

sure, there are two main ways:

Easy: use the slideUp animation on the upper box and what's beneath it should slide up to take its place.

$('#box-1').slideUp();

hard: use the jQuery animations to animate a property on the lower box after the hide animation completes on the first

Upvotes: 4

Related Questions