Show/Hide (Avançado) Parte 2

by gsguma

HTML

<div id="normal">
    texto texto texto texto
    texto texto texto texto
    texto texto texto texto
    texto texto texto texto
    texto texto texto texto    
</div>

<br />

<div id="otimizado">
    texto texto texto texto
    texto texto texto texto
    texto texto texto texto
    texto texto texto texto
    texto texto texto texto
</div>

CSS

#normal { 
    padding: 10px;
    width:10px;
    background:red 
}
#otimizado  { 
    padding: 10px;
    width:10px;
    background:green 
}

JavaScript

//Normal:
$('#normal').animate({
    width: 200
}, function() {
    setTimeout(function() {
        $('#normal').animate({
            marginTop: 30
        });
    }, 1000);
});

//Otimizado:
$('#otimizado').animate({
    width: 200
}).delay(1000).animate({
    marginTop: 30
});