Résumé du traitement de l'animation jQuery-js tutoriel-php.cn

Je travaille sur des trucs front-end depuis plus d'un an Parce que mon patron recherche des effets jeunes et dynamiques, afin que les éléments de la page ne puissent pas simplement être masqués et affichés, j'utilise donc souvent des effets d'animation. J'ai trouvé que l'animation jQuery est vraiment facile à utiliser. Ah, résumons celles couramment utilisées. J'espère que je n'aurai pas à lire l'API à chaque fois que je l'utilise. 🎜>

Ces deux méthodes sont comme XMLHttpRequest d'Ajax. L'objet est également caché et inconnu des gens ordinaires. Ces deux méthodes sont très utiles dans le traitement des animations. Nous écrivons souvent du code comme celui-ci

De cette façon, la hauteur, la largeur et l'opacité du test p changer en même temps Oui, parfois nous ne voulons pas l'exécuter de manière synchrone, mais séparer le changement de forme et le changement de transparence. D'abord, cela devient un p de 300*300, puis la transparence change progressivement. comme ça

$('#test').animate({            "width": "300px",            "height": "300px",            "opacity":"1"
        });

Copier après la connexion

Les étudiants peuvent imaginer à quoi ressemblerait le code s'il y avait dix processus d'animation queue() et dequeue() peuvent résoudre de tels problèmes et créer un. file d'attente pour toutes les méthodes de processus. La fonction est appelée dans l'ordre, regardez d'abord la syntaxe

$('#test').animate({            "width": "300px",            "height": "300px",
        }, function () {
            $('#test').animate({ "opacity": "1" });
        });

Copier après la connexion

queue( [queueName], newQueue)

L'opération consiste à exécuter la méthode de file d'attente Le premier paramètre est le nom de la file d'attente, s'il n'est pas écrit, la valeur par défaut est fx

Le deuxième paramètre peut être un tableau de fonctions pour stocker toutes les fonctions de file d'attente, ou il peut être une fonction de secours utilisé pour ajouter de nouvelles fonctions à la file d'attente

dequeue( [queueName ] )

Exécuter la fonction suivante dans la file d'attente pour l'élément correspondant

Chaque fois que vous appelez cette méthode, exécutez la fonction suivante dans la file d'attente

Le code ci-dessus peut faire en sorte que le test p passe d'abord à 200*200, puis à 400*400. Chaque animation s'exécute. la fonction de rappel et appelle la méthode suivante dans la file d'attente. Les animations sont exécutées en séquence. Si vous souhaitez ajouter une fonction pendant la période d'exécution, vous pouvez le faire

var q = [            function () {
                $(this).animate({                    "width": "200px",                    "height":"200px"
                }, next)
            },            function () {
                $(this).animate({                    "width": "400px",                    "height": "400px"
                }, next);
            }
        ];        function next(){
            $('#test').dequeue('myQueue');
        }

        $('#test').queue('myQueue', q);
        next();

Copier après la connexion

.
En bref, ces deux méthodes ont pour but de faciliter l'exécution des animations dans un ordre prédéterminé

var q = [            function () {
                $(this).animate({                    "width": "200px",                    "height":"200px"
                }, next)
            },            function () {
                $(this).animate({                    "width": "400px",                    "height": "400px"
                }, next);
            }
        ];        function next(){
            $('#test').dequeue('myQueue');
        }

        $('#test').queue('myQueue', q);
        next();
        $('#test').queue('myQueue',function () {
            $(this).slideUp().dequeue('myQueue');
        });

Copier après la connexion

clearQueue() /stop()

Ces deux méthodes sont principalement utilisées pour annuler l'animation

clearQueue( [queueName ] )

Effacer les fonctions dans la file d'attente

stop( [queue ] [, clearQueue ] [, jumpToEnd ] )

est utilisé pour arrêter l'animation en cours

file d'attente : le nom de la file d'attente d'animation en cours

clearQueue : La valeur par défaut est false, s'il faut effacer la file d'attente elle-même

jumpToEnd : Le la valeur par défaut est fausse, s'il faut terminer l'animation immédiatement

Si vous souhaitez arrêter l'animation tout de suite, vous pouvez écrire comme ceci

Écrire ainsi ne mettra pas fin à l'animation, mais une fois l'animation en cours exécutée, l'animation suivante dans la file d'attente ne sera pas appelée (la file d'attente a été vidée, il n'y en a pas de suivante) ), si vous souhaitez arrêter l'animation immédiatement , vous pouvez écrire comme ceci

$('#test').clearQueue('myQueue');

Copier après la connexion

Quant à savoir si l'animation est en pause ou exécutée immédiatement, vous devez configurer les paramètres de stop()

$('#test').stop();

Copier après la connexion

slideDown()/ slideUp()/ slideToggle()

L'effet de diapositive est souvent utilisé lors de la réalisation d'animations, en particulier de menus. Ces trois fonctions sont très simples, c'est-à-dire que les éléments sont réduits/développés/Déterminés automatiquement. le pli et l'étirement, mais ses paramètres ne sont pas seulement la durée, nous pouvons également ajouter d'autres contrôles. Jetez un œil à l'introduction dans l'API Ce paramètre de fonction Sanger

est similaire, et l'exemple slideUp

slideUp( [duration ] [, easing ] [, complete ] ) l'assouplissement est une méthode de dégradé. Je ne l'ai jamais modifié manuellement. Si la durée n'est pas écrite, cela prendra environ une seconde. compléter l'animation par défaut.

slideUp(options)

Les configurations couramment utilisées dans les options sont durée : durée d'animation

file d'attente : voir ceci ci-dessus Naturellement vous comprendrez

étape : exécutée à chaque fois que l'

attribut

change pendant l'animation

complète : exécutée lorsque l'animation est terminée start : exécuté lorsque l'animation démarre

toujours : se produit lorsque l'animation est terminée ou qu'un accident se produit et que l'exécution n'est pas terminée

Ces trois fonctions modifieront la hauteur de l'élément lors de l'exécution. Après l'exécution de sideUp(), après cela, la hauteur sera restaurée et la boîte de dialogue sera définie sur none

fadeIn()/ fadeOut()/ fadeToggle()/ fade. fadeTo()

fadeIn()/ fadeOut()/ fadeToggle() L'utilisation est similaire à celle de la série slide et ne sera pas expliquée une par une. Cependant, ces trois fonctions modifient la transparence de l'élément. . Une fois la fonction fadeOut() exécutée, elle restaurera l'opacité de l'élément et modifiera l'attribut

display

défini sur none

fadeTo(duration, opacity [, easing. ] [, complete ] ) La méthode fadeTo() n'est pas si compliquée, mais la durée et l'opacité de fadeTO() ne sont pas omises Oui, vous devez écrire

show()/ hide()/ toggle()

这三个函数的用法和slide系列一样，但是在效果上有几点儿不同

1.如果参数duration不写，那么回立即执行没有动画

2.这个动画同时修改height、width、opacity属性

3.hide()执行完成后会将height、width、opacity属性还原，并把display设为none

animate()

有些复杂的动画靠上面几个函数不能够实现，这时候就是强大的animate派上用场的时候了,animate()有两种用法

.animate( properties [, duration ] [, easing ] [, complete ] )

大部分属性都不用解释，properties是个json，属性的值可以是字面量、function、”toggle”、简单表达式，如果是function会把返回值赋给属性，熟悉jQuery的同学肯定明白“toggle”是什么，就是让一个属性在初始值和最小值之间切换，能够使用toggle的属性有width、height、opacity等包含数字值属性，简单表达式是+=、-=等，比如可以这么些 “width”:”+=10px”。

$( "#block" ).animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "+=10px"
  }, 1500 );

Copier après la connexion

如果传入了回掉函数，该函数会在动画执行完后调用

.animate( properties, options )

这种用法更为灵活，properties和前一个用法一样，常用options有

duration：动画时间

queue：function队列

step：每次属性调整的回掉函数

complete：完成动画的回掉函数

start：动画开始的时候调用

always：动画被终止或者意外发生没有执行完时发生

要不说jQuery好用，上面这几个配置是不是很熟悉呢

$( "#book" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<p>Animation complete.</p>" );
    }
  });

Copier après la connexion