jQuery 停止动画

简介: jQuery 停止动画

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

停止滑动

点击这里,向上/向下滑动面板


实例

jQuery stop() 滑动

演示 jQuery stop() 方法。

jQuery stop() 动画(带参数)

演示 jQuery stop() 方法


jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

语法:

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法,不带参数:

实例

$("#stop").click(function(){  $("#panel").stop();});


尝试一下 »

jQuery 效果 – 动画

jQuery Callback 方法

2 篇笔记 写笔记


  1.   喔喔和奶糖
     100***0887@qq.com
    298
    动画队列停止动画测试,只停止当前正在进行的动画,停止当前动画后,队列中的下一个动画开始进行:

$(document).ready(function(){

 $("#flip").click(function(){

   $("#panel").slideDown(5000);

   $("#panel").slideUp(5000);

 });

 $("#stop").click(function(){

   $("#panel").stop();

 });

});

  1. 尝试一下 »
    喔喔和奶糖
      喔喔和奶糖
     100***0887@qq.com
    6年前 (2018-11-10)

  2.   11111
     213***213@qq.com
    298
    可以在 stop() 中设置 stopAll 的参数为 true,这样就可以停止所有动画效果而不是只停止当前动画:

$(document).ready(function(){

 $("#flip").click(function(){

   $("#panel").slideDown(5000);

   $("#panel").slideUp(5000);

 });

 $("#stop").click(function(){

   $("#panel").stop(true);

 });

});

  1. 11111
      11111
     213***213@qq.com
    6年前 (2018-12-24)
目录
相关文章
N..
|
6月前
|
JavaScript 前端开发 UED
jQuery动画特效
jQuery动画特效
N..
73 1
|
6月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
|
6月前
|
机器学习/深度学习 JavaScript
|
1月前
|
JavaScript 前端开发 UED
jQuery 动画
【10月更文挑战第8天】
109 55
|
5月前
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
48 0
|
2月前
|
JavaScript
jQuery 停止动画
jQuery 停止动画
21 4
|
2月前
|
缓存 JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
29 4
|
2月前
|
JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
42 11
|
3月前
|
JavaScript 前端开发
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
如何在Vue 2或Vue 3项目中引入jQuery及其动画扩展库jQuery.easing,以实现更丰富的动画效果。
179 0
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
|
6月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
110 1