CODEWITHSUNDEEP
jqueryhtmlcssjquery-animate
user2461031
user2461031

Reputation: 513

jquery, some issues/questions with animate()

Inside a div #frame I have 3 divs: #top, #middle, and #bottom.

#top and #bottom are in display none and when I'm clicking on #middle I'm showing them.

My css are:

#frame{
    position: absolute;
    top:30px;
    left:30px;
    border-style: solid;
    border-width: 1px;
    width:200px;
    height:200px;
}

#middle{
    width:200px;
    height:200px;
    position: absolute;
    top:0px;
}

#top{
    display:none;
    background-color:red;
    width:100%;
}

#bottom{
    position:absolute;
    display:none;
    bottom:0px;
    background-color:red;
    width:100%;
}

my html:

<div id="frame">
    <div id="top">top</div>
    <div id="middle">middle</div>
    <div id="bottom">bottom<br>bottom<br>bottom<br>bottom</div>
</div>

and my jQuery:

$('#middle').click(function () {
    $('#middle').animate({'top':'19px'});
    $('#frame').animate({
        'height':$(this).height()+$('#bottom').height()+20,
        'top':$(this).offset().top-20
    },function(){
        $('#top').show();
        $('#bottom').show();
    });     
});

Here a jsFiddle: http://jsfiddle.net/malamine_kebe/K6QJS/1/

So I have several question:

Do you think it's a good way to do the effect?

Now #top and #bottom are showing when the animation is done, is it possible to show them in the same time as the animation goes?

Finaly if the html of #bottom comes from an ajax requete, would I be abble to save its height with $('#bottom').height() like I did?

Thanks a lot for your help...

Upvotes: 0

Views: 50

Answers (1)

Howard Renollet
Howard Renollet

Reputation: 4739

I think it's a good effect and a good way to accomplish what you are trying to do. Check this one out. I think it's a little cleaner and also a really good effect: http://jsfiddle.net/K6QJS/2/

$('#middle').click(function () {
    $('#middle').animate({'top':'19px'});
    $('#frame').animate({
        'height':$(this).height()+$('#bottom').height()+20,
        'top':$(this).offset().top-20
    },function(){
        $('#top').slideDown();
        $('#bottom').slideDown();
    });     
});

Upvotes: 2

Related Questions