animate example

by andrew rowe

HTML

<button>Go</button>
<div id='a'></div>
<div id='b'></div>

CSS

#a {
    height: 100px;
    width: 200px;
    background-color: red;
}
#b {
    height: 100px;
    width: 200px;
    background-color: blue;
}

JavaScript

$('button').click(function (evt) {
    $('#a').stop().animate({
        height: 0,
        opacity: 0
    }, 3500).animate({
        height: 100,
        opacity: 1
    }, 3500);
});
$('#b').mouseenter(function (evt) {
    $(this).animate({
        opacity: 0
    }, 500).animate({
        opacity: 1
    }, 500);
});