CODEWITHSUNDEEP
jqueryanimation
Andy
Andy

Reputation: 1432

DIV animation, sliding issue

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

I'm looking to fix this animation if possible. The first part works perfectly, the DIV slides left to reveal more content with the DIV below sliding up. The reverse doesn't because the content DIV doesn't display properly and the DIV below doesn't slide back down.

Any help is appreciated.

It is a continuation of this discussion from yesterday Animating a DIV automatically

     $(function() {
$(".left_slide").click(function() {
    $("#inner_container").stop(true, true).animate({ left: -400 }, 500, function(){
        $(".block1").stop(true, true).animate({height: "1px"},1000);
    })
});
});
$(function() {    
$(".right_slide").click(function() {
    $("#inner_container").stop(true, true).animate({ left: 0 }, 500, function(){
        $(".block1").stop(true, true).animate({height: "1px"},1000);
    })
});
});

CSS

#blog_slide_container {
position: relative;
overflow: hidden;
width: 400px;
z-index: 5;
border: 1px solid #000;
}

#inner_container{
position: relative;
width: 2000px;   
}

.block1 {
position: relative;
display: inline-block;
vertical-align: top;
top: 0px;
left: 0px;
width: 400px;
z-index: 6;
background-color: #333;
color: #FFF;
}
.block2 {
position: relative;
display: inline-block;
vertical-align: top;
top: 0px;
left: 0px;
width: 400px;
z-index: 6;
background-color: #333;
color: #FFF;
}
#bottom_container {
position: relative;
float: left;
width: 100%;
height: 280px;
z-index: 3;
background-color: #000;
}

Upvotes: 0

Views: 219

Answers (2)

AgnosticMantis
AgnosticMantis

Reputation: 716

I thought we've fixed it yesterday Animating a DIV automatically

Take this http://jsfiddle.net/skram/fVKDy/17/

Upvotes: 0

ori
ori

Reputation: 7847

Try this fiddle: 

$(function() {
    var block1_h = 0;
    $(".left_slide").click(function() {
        $("#inner_container").stop(true, true).animate({
            left: -400
        }, 500, function() {
            block1_h = $(".block1").stop(true, true).animate({
                height: "1px"
            }, 1000).height();
        })
    });
    $(".right_slide").click(function() {
        $(".block1").stop(true, true).animate({
            height: block1_h
        }, 1000, function() {
            $("#inner_container").stop(true, true).animate({
                left: 0
            }, 500);
        });
    });
});

I just kept the original .block1 height in a variable. That way I could completely reverse the order of animation.

Upvotes: 1

Related Questions