Heim > Artikel > Web-Frontend > Lassen Sie uns darüber sprechen, wie Sie Animationen mit jQuery implementieren (detaillierte Code-Erklärung).
Wie implementiert man Animationen mit jQuery? Der folgende Artikel stellt Ihnen einige jQuery-Methoden zum Implementieren vordefinierter oder benutzerdefinierter Animationen vor. Ich hoffe, er wird Ihnen hilfreich sein!
Einblenden und ausblenden
Die show()
-Methode und die hide()
-Methode sind die grundlegendsten Animationsmethoden in jQuery . Die spezifische Syntax lautet wie folgt: show()
方法和 hide()
方法是 jQuery 中最基本的动画方法。具体语法如下:
$element.show([speed],[easing],[fn]); $element.hide([speed],[easing],[fn]);
/* 显示与隐藏 1.无动画版本 * show()- 显示 * hide() - 隐藏 2.有动画版本 - 同时改变宽度和高度 * show (speed,callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数 * hide (speed, callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数 */ $('#box').hide(2000,function(){ $('#box').show(2000); });
滑动式动画
slidelUp()
方法和 slideDown()
方法通过改变高度值实现动画效果。具体语法如下:
$element.slideUp([speed],[easing],[fn]); $element.slideDown([speed],[easing],[fn]);
/* 滑动式动画 - slideup()和slideDown() * 注意 - 没有无动画版本(底层代码预定义动画执行的时长) * 效果 - 改变指定元素的高度 */ $('#box').slideUp(3000); $('#box').slideDown(3000);
淡入淡出效果
fadeln()
方法和 fadeOut()
方法通过改变透明度实现动画效果。具体语法如下:
$element.fadeln([speed],[easing],[fn]); $element.fadeOut([speed],[easing],[fn]);
// 改变元素的透明度 $('#box').fadeOut(3000); $('#box').fadeIn(3000);
动画切换效果
jQuery 除了提供了三种预定义动画效果之外,还提供三组动画切换效果:
toggle
([speed], [easing] [, fn] )方法 : 如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。slideToggle
([speed], [easing] [, fn]) 方法 : 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。fadeToggle
([speed], [easing] [, fn]) 方法 : 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。$('#btn').click(function(){ // $('#box').toggle(3000); // $('#box').slideToggle(3000); $('#box').fadeToggle(3000) })
具有局限性
animate()方法
jQuery 提供了 anirmate()
方法完成自定义动画效果,该方法具有两种用法:
$element.animate(properties,duration,easing,complete)
/* animate()方法–自定义动画方法 1.animate(properties,duration,callback) * properties - 表示cSS的样式属性 * 设置动画执行结束的样式属性值 * duration - 表示动画执行的时长,单位为亳秒 * callback - 表示动画执行完毕后的回调函数 2.animate(properties,options) * properties - 表示cSS的样式属性 * 设置动画执行结束的样式属性值 * options - 表示设置动画的相关参数 * speed - 表示动画执行的时长,单位为毫秒 * comalete - 表示动画执行完毕后的回调函数 * queue - 布尔值,设置是否添加到动画队列中 */ /* $('#box').animate({ width : 100, height : 100 },3000); */ $('#box').animate({ width : 100, height : 100, left : 100 },{ speed : 3000 });
通过 animate()
方法实现动画效果,但不支持以下 CSS 样式属性:
backgroundColor
borderBottonColor.
borderLeftColor
borderRightColor
borderTopColor
Color
outlineColor
并发与排队效果
并发效果 : 指的就是多个动画效果同时执行。
$("#panel").click(function(){ $(this).animate({ left: "500px", height:"200px" }, 3000); };
排队效果 : 指的就是多个动画按照先后顺序执行。
$("#panel").click(function(){ $(this).animate({ left: "500px"},3000) .animate({ height: "200px" }, 3000); });
queue
: 用于控制当前的动画效果是并发还是排队效果:
/* queue - 用于控制当前的动画效果是并发还是排队效果 * 参数 * false - 并发 * true - 排队 */ $('#box').animate({ left : 300 },{ duration : 3000 }).animate({ top : 300 },{ duration : 3000, queue : true });
停止动画效果
jQuery 提供了 stop()
方法用于停止所有在指定元素上正在运行的动画,具体语法如下:
$element.animate([clearQueue][, gotoEnd]);
clearQueue : 如果设置成 true,则清空队列。可以立即结束动画。
gotoEnd : 让当前正在执行的动画立即完成,并且重设 show 和 hide 的原始样式,调用回调函数等
$('#stort').click(function(){ $('#box').animate({ left : 600 },3000).animate({ top : 200 },3000) }); $('#stop').click(function(){ /* * stop()方法没有接收任何参数时 - 立即停止执行动画 * stop(queue)方法的第一个参数 * false - 表示停止当前动画,但队列中的动画继续执行 * true - 表示停止当前动画,并且清空动画队列 * stop (queue,gotoEnd)方法的第二个参数 * false - 不会做任何处理 * true - 表示停止当前动画,并且将指定元素设置为动画执行完毕后的样式 */ $('#box').stop(true,true); });
延迟执行动画
jQuery 提供了 delay()
$element.delay(duration, queueName]);
$('#box').animate({ left : 600 },3000).delay(1000).animate({ top : 200 },3000);Schiebeanimation
fadenln()
-Methode und fadeOut()
-Methode erzielen Animationseffekte durch Ändern der Transparenz. Die spezifische Syntax lautet wie folgt: 🎜rrreee toggle ([speed], [easing] [, fn] ) Methode: Wenn das Element sichtbar ist, wechseln Sie zu versteckt; wenn das Element ausgeblendet ist, wechseln Sie zu sichtbar.
slideToggle
([speed], [easing] [, fn]) Methode: Schaltet die Sichtbarkeit aller übereinstimmenden Elemente durch Ändern der Höhe und optional nach Abschluss des Schalters um eine Callback-Funktion. fadeToggle
([speed], [easing] [, fn]) Methode: Schalten Sie die Ein- und Ausblendeffekte aller passenden Elemente durch Änderungen in der Deckkraft um und Vervollständigt die Animation und löst optional eine Rückruffunktion aus. anirmate The () Die Methode
vervollständigt den benutzerdefinierten Animationseffekt. Diese Methode hat zwei Verwendungszwecke: 🎜rrreeeanimate()
erreicht, aber die folgenden CSS-Stilattribute werden nicht unterstützt:🎜backgroundColor
borderBottonColor.
borderLeftColor
borderRightColor code>
borderTopColor
Color
outlineColor
queue
: Wird verwendet, um zu steuern, ob der aktuelle Animationseffekt gleichzeitig oder in der Warteschlange ist: 🎜rrreee🎜🎜🎜Animationseffekt stoppen🎜🎜🎜🎜jQuery stellt stop()
bereit Die Methode wird verwendet, um alle Animationen zu stoppen, die auf dem angegebenen Element ausgeführt werden. Die spezifische Syntax lautet wie folgt: 🎜rrreee🎜clearQueue: Wenn auf true gesetzt, wird die Warteschlange gelöscht. Die Animation kann sofort beendet werden. 🎜🎜gotoEnd: Lassen Sie die aktuell ausgeführte Animation sofort abschließen, setzen Sie die ursprünglichen Ein- und Ausblendstile zurück, rufen Sie Rückruffunktionen auf usw. 🎜rrreee🎜🎜🎜Verzögern Sie die Ausführung der Animation🎜🎜🎜🎜jQuery bietet delay() wird verwendet, um eine Verzögerung festzulegen, um die Ausführung nachfolgender Elemente in der Warteschlange zu verzögern. Die spezifische Syntax lautet wie folgt: 🎜rrreee🎜duration: Verzögerungszeit in Millisekunden. 🎜🎜queueName: Warteschlangensubstantiv, der Standardwert ist Ex, Animationswarteschlange. 🎜rrreee🎜 Empfohlene verwandte Video-Tutorials: 🎜jQuery-Video-Tutorial🎜🎜
Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie Animationen mit jQuery implementieren (detaillierte Code-Erklärung).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!