Exemples d'utilisation de méthodes d'effets spéciaux courantes dans jquery

Exemples d'utilisation de méthodes d'effets spéciaux courantes dans jquery_jquery

WBOY

Libérer： 2016-05-16 16:51:24

original

1215 Les gens l'ont consulté

1. jQuery fadeIn() est utilisé pour faire apparaître les éléments cachés.

Syntaxe :

Copier le code Le code est le suivant :

$(sélecteur) .fadeIn (vitesse, rappel);

Exemple :

Copier le code Le code est le suivant :

$("bouton "). click(function(){
 $("#div1").fadeIn();
 $("#div2").fadeIn("lent");
 $("#div3 "). fadeIn(3000);
});

2. La méthode jQuery fadeOut() est utilisée pour faire disparaître les éléments visibles.

Syntaxe :

Copier le code Le code est le suivant :

$(sélecteur) .fadeOut (vitesse, rappel);

3. La méthode jQuery fadeToggle() bascule entre les méthodes fadeIn() et fadeOut().

fadeToggle() ajoute un effet de fondu entrant à l'élément s'il est déjà fondu.

Si l'élément est déjà apparu en fondu, fadeToggle() ajoute un effet de fondu sortant à l'élément.

Syntaxe :

Copier le code Le code est le suivant :

$(sélecteur) .fadeToggle(vitesse,rappel);

Exemple : $("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow") ;
$("#div3").fadeToggle(3000);
});

4. Syntaxe :

$(selector).fadeTo(vitesse, opacité, rappel);

Le paramètre de vitesse requis précise la durée de l'effet. Il peut prendre les valeurs suivantes : "lent", "rapide" ou millisecondes.

Le paramètre d'opacité requis dans la méthode fadeTo() définit l'effet de fondu sur l'opacité donnée (une valeur comprise entre 0 et 1). Exemple

Copier le code Le code est le suivant :

$("bouton").cliquez (fonction( ){

$("#div1").fadeTo("lent",0.15);

$("#div2").fadeTo("lent",0.4);

$("#div3").fadeTo("lent",0.7);

});

5. La méthode jQuery slideDown() est utilisée pour faire glisser les éléments vers le bas.

Syntaxe :

Copier le code Le code est le suivant :

$(sélecteur) .slideDown(vitesse,rappel);

Copier le code Le code est le suivant :

$("#flip").cliquez (function( ){
 $("#panel").slideDown();
});

6. La méthode jQuery slideUp() est utilisée pour faire glisser les éléments vers le haut.

Syntaxe :

Copier le code Le code est le suivant :

$(sélecteur) .slideUp( speed,callback);

Le paramètre facultatif speed spécifie la durée de l'effet. Il peut prendre les valeurs suivantes : "lent", "rapide" ou millisecondes.

Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois le glissement terminé.

7. La méthode jQuery slideToggle() peut basculer entre les méthodes slideDown() et slideUp().

Si des éléments glissent vers le bas, slideToggle() les fait glisser vers le haut.

Si des éléments glissent vers le haut, slideToggle() les fait glisser vers le bas.

Copier le code Le code est le suivant :

$(selector).slideToggle(speed, rappel);

8. La méthode jQuery animate() est utilisée pour créer des animations personnalisées.

Syntaxe :

Copier le code Le code est le suivant :

$(sélecteur) .animate( {params},vitesse,rappel);

Le paramètre params obligatoire définit les propriétés CSS qui forment l'animation.

Le paramètre optionnel de vitesse précise la durée de l'effet. Il peut prendre les valeurs suivantes : "lent", "rapide" ou millisecondes.

Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois l'animation terminée.

Il est également possible de définir des valeurs relatives (la valeur est relative à la valeur actuelle de l'élément). Vous devez ajouter = ou -= devant la valeur :

Vous pouvez également définir un groupe d'animations pour implémenter la fonction de file d'attente.

L'exemple suivant montre une application simple de la méthode animate() ; elle déplace l'élément

vers la gauche jusqu'à ce que l'attribut left soit égal à 250 pixels :

Exemple

Copier le code Le code est le suivant :

$("bouton" ).click (function(){
 $("div").animate({left:'250px'});
}); 
 

9. La méthode jQuery stop() est utilisée pour arrêter les animations ou les effets avant leur fin

10. Lorsque l'animation est terminée à 100%, appelez la fonction Callback.

Syntaxe typique :

Copier le code Le code est le suivant :

$(sélecteur ). masquer(vitesse,rappel)

11. Lien de la méthode jQuery

Certains éléments ne doivent être obtenus qu'une seule fois, vous pouvez donc utiliser des liens pour ajouter des méthodes.

C’est la méthode des points. Par exemple,

Copier le code Le code est le suivant :

$("#p1" ).css(" couleur","rouge").slideUp(2000).slideDown(2000);