CODEWITHSUNDEEP
javascript
user2468586
user2468586

Reputation: 13

Smooth animation effect

http://jsfiddle.net/HGCaF/6/ I am trying to make my div move more smoother when moving down the page and back up, it's hard to describe but if you take a look at the link you will begin to understand what I mean, Here is a sample structure of the webpage:

<div id="window">
    <div id="title_bar">
        <div id="button">-</div>
    </div>
    <div id="box">
    </div>
 </div>

Upvotes: 0

Views: 101

Answers (1)

Mati
Mati

Reputation: 1385

Here's one way of doing that:

CSS:

#window{
    width:400px;
    border:solid 1px;
    position:absolute;
}

JavaScript:

$("#button").click(function(){
    $("#box").slideToggle();

    if($(this).html() == "-"){

        $(this).html("+");
        setTimeout(function() {
            $('#window').css('top', 'auto');
            $('#window').animate({ 'bottom': '0' }, 500);
        }, 500);
    }
    else{
        $(this).html("-");

        setTimeout(function() {
            $('#window').animate({ 'top': '0' }, 500);
            $('#window').css('bottom', 'auto');
        }, 500);
    }
});

Works in FF, I haven't tested other browsers.

Upvotes: 0

Related Questions