jQuery - Métodos em cadeia
Outra grande vantagem obtida com o jQuery é o uso de métodos em cadeia repetindo-se a notação com ponto. Isto faz com que seja possível realizar vários métodos no mesmo objeto com apenas um comando.
No exemplo da última aula, em que fizemos dois animates em fila, não precisávamos ter selecionado o elemento duas vezes, bastava usar os métodos em cadeia. Isto reduz o código e melhora a performance.
$("#animar").click(function(){
$("#quadrado").animate({
width: '+=20px'
},500).animate({
height: '+=20px'
},500).css('background-color', 'green');
});
Note que no exemplo acima, a cor foi alterada sem respeitar a fila, pois como foi dito, apenas o método animate possui esta funcionalidade. Para alterar a cor após a última animação, podemos fazer isto com um callback no último animate da fila.
$("#animar").click(function(){
$("#quadrado").animate({
width: '+=20px'
},500).animate({
height: '+=20px'
},500, function() {
$("#quadrado").css('background-color', 'green')
});
});
Desta maneira perde-se a vantagem que temos com os métodos em cadeia, mas é um recurso que pode ser usado caso necessário.
Melhorando a visualização dos métodos em cadeia
A utilização de muitos métodos em cadeia pode gerar uma certa confusão no código, principalmente com velocidades e funções callback sendo usadas. Para melhorar a organização e visualização do código, podemos pular linhas entre os métodos e ajustar a indentação conforme nos seja mais conveniente.
$("#animar").click(function(){
$("#quadrado")
.animate({width: '+=20px'},500)
.animate({height: '+=20px'},500,
function() {
$("#quadrado").css('background-color', 'green')
}
)
.animate({borderRadius: '20px'});
});