CODEWITHSUNDEEP
jqueryjquery-animate
Andy
Andy

Reputation: 1432

Animating a DIV automatically

http://jsfiddle.net/AndyMP/fVKDy/

This fiddle illustrates a problem I am trying to solve. The container DIV accommodates two DIVs which are animated across. The second DIV has a smaller height than the first because there is less content. What I am trying to do is get the bottom DIV to slide up automatically according to the height of the content in the second DIV when it is visible. But it slides up and over the second DIV.

Any thoughts on how to solve this? 

$(function() {
    $(".left_slide").click(function() {
        $(".block1").stop(true, true).animate({ left: -400 }, 500).hide(1000);
        $(".block2").stop(true, true).animate({ left: 0 }, 500);
    });
});
$(function() {    
    $(".right_slide").click(function() {
        $(".block2").stop(true, true).animate({ left: 400 }, 500);
        $(".block1").stop(true, true).animate({ left: 0 }, 500);
    });
});

CSS

#blog_slide_container {
position: relative;
width: 400px;
z-index: 5;
overflow: hidden;
border: 1px solid #000;
}
.block1 {
position: relative;
top: 0px;
left: 0px;
width: 400px;
z-index: 6;
background-color: #333;
color: #FFF;
}
.block2 {
position: absolute;
top: 0px;
left: 400px;
width: 400px;
z-index: 6;
background-color: #CCC;
color: #FFF;
}
#bottom_container {
position: relative;
float: left;
width: 100%;
height: 280px;
z-index: 3;
background-color: #000;
}

Upvotes: 3

Views: 415

Answers (3)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Edit: Check my updated fiddle

Added code to dynamically change the container height.

Check animated version http://jsfiddle.net/skram/fVKDy/17/

Another version.. http://jsfiddle.net/skram/fVKDy/16/ <-- Difference is that the left/right shift happens after the bottom blocks slides up/down.

Check the updated fiddle demo.

Two things,

  1. Added a fixed height to the #blog_slide_container. When you animate, the position of the animating div becomes absolute and so the container re-sizes itself to 0 height.
  2. Added show on block1 when right is clicked.

Upvotes: 1

AgnosticMantis
AgnosticMantis

Reputation: 716

This is it... i guess -> http://jsfiddle.net/fVKDy/13/ Both parts are working here. Just put another wrapper to your blocks and delete those position relatives. The only non static positioning you need is on the additional wrapper.

Here is another version. http://jsfiddle.net/fVKDy/5/ Iam going to tweak it a bit more..

Upvotes: 1

James Montagne
James Montagne

Reputation: 78650

I believe this is what you're looking for.

http://jsfiddle.net/fVKDy/11/

I will come back shortly and edit in an explanation (have to run). But basically I added an inner container which is animated instead of the elements themselves.

Upvotes: 1

Related Questions