Maison > Article > interface Web > Résumé du traitement de l'animation jQuery
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" });
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" }); });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'attentedequeue( [queueName ] )
Exécuter la fonction suivante dans la file d'attente pour l'élément correspondantChaque 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();
.
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'); });clearQueue() /stop()Ces deux méthodes sont principalement utilisées pour annuler l'animation
clearQueue( [queueName ] )
Effacer les fonctions dans la file d'attentestop( [queue ] [, clearQueue ] [, jumpToEnd ] )
est utilisé pour arrêter l'animation en coursfile 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êmejumpToEnd : Le la valeur par défaut est fausse, s'il faut terminer l'animation immédiatementSi 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');
Quant à savoir si l'animation est en pause ou exécutée immédiatement, vous devez configurer les paramètres de stop()
$('#test').stop();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'
attributchange 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
displayfadeTo(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
这三个函数的用法和slide系列一样,但是在效果上有几点儿不同
1.如果参数duration不写,那么回立即执行没有动画
2.这个动画同时修改height、width、opacity属性
3.hide()执行完成后会将height、width、opacity属性还原,并把display设为none
有些复杂的动画靠上面几个函数不能够实现,这时候就是强大的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 );
如果传入了回掉函数,该函数会在动画执行完后调用
.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>" ); } });
严格说这个并不是个动画函数,但是由于低版本IE的hover对很多元素都不起作用,用CSS无法完成很多动作,所以经常需要使用JavaScript进行haver事件的处理。
.hover( handlerIn(eventObject), handlerOut(eventObject) )
方法很简单,不多介绍了,这样就能把mousein 和mouseout写在一起了。
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!