Connexion d'animation jQuery
Grace à jQuery, les actions/méthodes peuvent être liées. Le cha?nage nous permet d'autoriser plusieurs méthodes jQuery (sur le même élément) dans une seule instruction.
Jusqu'à présent, nous avons écrit les instructions jQuery une par une (l'une après l'autre). Cependant, il existe une technique appelée cha?nage qui nous permet d'exécuter plusieurs commandes jQuery sur le même élément, les unes après les autres. Astuce?: De cette fa?on, le navigateur n’a pas besoin de rechercher plusieurs fois le même élément.
Pour lier une action, il vous suffit d'ajouter l'action à l'action précédente.
Exemple 1. L'exemple suivant relie css(), slideUp() et slideDown() ensemble. L'élément "p1" deviendra d'abord rouge, puis glissera vers le haut, puis vers le bas?:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery 樂趣十足！</p>
<button>點(diǎn)擊這里</button>
</body>
</html>Nous pouvons également ajouter plusieurs appels de méthode si nécessaire. Astuce?: lors de la liaison, les lignes de code sont perturbées. Cependant, jQuery n'est pas très strict en matière de syntaxe?; vous pouvez l'écrire dans n'importe quel format, y compris les sauts de ligne et l'indentation.
Exemple 2, il peut également être exécuté s'il est écrit comme ceci?:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery 樂趣十足！</p>
<button>點(diǎn)擊這里</button>
</body>
</html>jQuery supprimera les espaces supplémentaires et exécutera la ligne de code ci-dessus comme une longue ligne de code.
