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!

Predefined animation

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]);

• speed: A string of one of three predetermined speeds ("slow", "normal" or "fast") or a millisecond value representing the animation duration.
• easing: used to specify the switching effect, the default is "swing", the available parameter is "linear".
• fn: Function executed when the animation is completed, once for each element.

/* 
显示与隐藏
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]);

speed: A string of one of three predetermined speeds ("slow", "normal" or "fast") or a millisecond value representing the animation duration.
easing: used to specify the switching effect, the default is "swing", the available parameter is "linear".
fn: Function executed when the animation is completed, once for each element.

/* 
滑动式动画 - 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: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$element.fadeln([speed],[easing],[fn]); $element.fadeOut([speed],[easing],[fn]);</pre><div class="contentsignin">Copy after login</div></div>

speed: A string of one of three predetermined speeds ("slow", "normal" or "fast") or a millisecond value representing the animation duration.

• easing: used to specify the switching effect, the default is "swing", the available parameter is "linear".
• fn: Function executed when the animation is completed, once for each element.

• // 改变元素的透明度
  $('#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:

toggle
• ([speed], [easing] [, fn] ) method: If the element is visible, switch to hidden; if the element is hidden, Toggle visible.
slideToggle
• ([speed], [easing] [, fn]) Method: Toggles the visibility of all matching elements by changing the height, and optionally triggers a Callback.
fadeToggle
• ([speed], [easing] [, fn]) Method: Switch the fade-in and fade-out effects of all matching elements through changes in opacity, and can be used after the animation is completed Optionally trigger a callback function.

  $('#btn').click(function(){
  // $('#box').toggle(3000);
  // $('#box').slideToggle(3000);
  $('#box').fadeToggle(3000)
  })

Has limitations

Custom animation

animate() method jQuery provides the

anirmate()

method to complete custom animation effects. This method has two usages: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$element.animate(properties,duration,easing,complete)</pre><div class="contentsignin">Copy after login</div></div>

properties: a CSS property and value Objects, the animation will move based on this set of objects.

• duration : A string or number that determines how long the animation will run.
• easing : A string indicating which easing function to use for the transition.
• corplete: Callback function executed when the animation is completed.

• /* 
  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
  });

The animation effect is achieved through the

animate() method, but the following CSS style attributes are not supported:

backgroundColor
borderBottonColor.
borderLeftColor
borderRightColor
borderTopColor
Color
• ##outlineColor

Concurrency Concurrent effects with queuing effects

: 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 effect

jQuery 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!