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

Copy after login

Fade effect

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>

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

  Copy after login

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)
  })

  Copy after login

Custom animation

animate() method jQuery provides the

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>

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

  Copy after login

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

backgroundColor
borderBottonColor.
borderLeftColor
borderRightColor
borderTopColor
Color
• ##outlineColor

: refers to the execution of multiple animation effects at the same time.

$("#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 provides the stop()

$element.animate([clearQueue][, gotoEnd]);

$('#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 provides the delay()

$element.delay(duration, queueName]);

$('#box').animate({
 left : 600
},3000).delay(1000).animate({
 top : 200
},3000);

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!