Home >Web Front-end >JS Tutorial >Let's talk about how to implement animation using jQuery (detailed code explanation)
How to implement animation using jQuery? The following article will introduce you to some jQuery methods to implement predefined animations or custom animations. I hope it will be helpful to you!
Show and hide
show( )
method and hide()
method are the most basic animation methods in jQuery. The specific syntax is as follows:
$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); });
Sliding animation
##slidelUp() method and
slideDown() Method to achieve animation effects by changing the height value. The specific syntax is as follows:
$element.slideUp([speed],[easing],[fn]); $element.slideDown([speed],[easing],[fn]);
/* 滑动式动画 - slideup()和slideDown() * 注意 - 没有无动画版本(底层代码预定义动画执行的时长) * 效果 - 改变指定元素的高度 */ $('#box').slideUp(3000); $('#box').slideDown(3000);
Fade effect
##fadeln() method and fadeOut()
Method to achieve animation effects by changing transparency. The specific syntax is as follows: <pre class="brush:js;toolbar:false;">$element.fadeln([speed],[easing],[fn]);
$element.fadeOut([speed],[easing],[fn]);</pre>
// 改变元素的透明度 $('#box').fadeOut(3000); $('#box').fadeIn(3000);
Animation switching effectIn addition to providing three predefined animation effects, jQuery also provides three sets of animation switching Effect:
$('#btn').click(function(){ // $('#box').toggle(3000); // $('#box').slideToggle(3000); $('#box').fadeToggle(3000) })
Custom animation
animate() method jQuery provides the
anirmate() method to complete custom animation effects. This method has two usages: <pre class="brush:js;toolbar:false;">$element.animate(properties,duration,easing,complete)</pre>
/* 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() method, but the following CSS style attributes are not supported:
##outlineColor
: refers to the execution of multiple animation effects at the same time.
$("#panel").click(function(){ $(this).animate({ left: "500px", height:"200px" }, 3000); };Queue effect: refers to the execution of multiple animations in sequence.
$("#panel").click(function(){ $(this).animate({ left: "500px"},3000) .animate({ height: "200px" }, 3000); });
queue
: Used to control whether the current animation effect is concurrent or queued:/* queue - 用于控制当前的动画效果是并发还是排队效果 * 参数 * false - 并发 * true - 排队 */ $('#box').animate({ left : 300 },{ duration : 3000 }).animate({ top : 300 },{ duration : 3000, queue : true });
Stop animation effectjQuery provides the stop()
method to stop all animations running on the specified element. The specific syntax is as follows:$element.animate([clearQueue][, gotoEnd]);
clearQueue: If set to true, Then clear the queue. Animation can be ended immediately.
gotoEnd: Let the currently executing animation be completed immediately, reset the original styles of show and hide, call callback functions, etc.$('#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); });Delay the execution of the animation
jQuery provides the delay()
method for setting a delay to delay the execution of subsequent items in the queue. The specific syntax is as follows:$element.delay(duration, queueName]);
duration: Delay time, unit is milliseconds.
queueName: Queue noun, the default is Ex, animation queue. $('#box').animate({ left : 600 },3000).delay(1000).animate({ top : 200 },3000);Recommended related video tutorials:
jQuery video tutorial
The above is the detailed content of Let's talk about how to implement animation using jQuery (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!