分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

jQuery中停止动画stop

发布时间:2023-09-06 01:10责任编辑:胡小海关键词:jQuery动画

jQuery中停止动画stop

动画在执行过程中是允许被暂停的,当一个元素调用.stop()方法,当前正在运行的动画(如果有的话)立即停止

语法:

.stop( [clearQueue ], [ jumpToEnd ] ).stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

stop还有几个可选的参数,简单来说可以这3种情况

  • .stop(); 停止当前动画,点击在暂停处继续开始
  • .stop(true); 如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
  • .stop(true,true); 当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值

简单的说:参考下面代码、

$("#aaron").animate({ ???height: 300}, 5000)$("#aaron").animate({ ???width: 300}, 5000)$("#aaron").animate({ ???opacity: 0.6}, 2000)
  1. stop():只会停止第一个动画,第二个第三个继续
  2. stop(true):停止第一个、第二个和第三个动画
  3. stop(true ture):停止动画,直接跳到第一个动画的最终状态 
<!DOCTYPE html><html><head> ???<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> ???<title></title> ???<style> ???p { ???????color: red; ???} ???????div { ???????width: 200px; ???????height: 100px; ???????background-color: yellow; ???????color: red; ???} ???a{ ???????display: block ???} ???</style> ???<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> ???<h2>stop</h2> ???<p>慕课网,专注分享</p> ???<div id="aaron">内部动画</div> ???<input id="exec" type="button" value="执行动画"><br /><br /> ???点击观察动画效果: ???<select id="animation"> ???????<option value="1">stop()</option> ???????<option value="2">stop(true)</option> ???????<option value="3">stop(true,true)</option> ???</select> ???<a></a> ???<input id="stop" type="button" value="停止动画"> ???<script type="text/javascript"> ???//点击执行动画 ???$("#exec").click(function(){ ???????$("#aaron").animate({ ???????????height: 300 ???????}, 5000) ???????$("#aaron").animate({ ???????????width: 300 ???????}, 5000) ???????$("#aaron").animate({ ???????????opacity: 0.6 ???????}, 2000) ???}) ???$("#stop").click(function() { ???????var v = $("#animation").val(); ???????var $aaron = $("#aaron"); ???????if (v == "1") { ???????????//当前当前动画 ???????????$aaron.stop() ???????} else if (v == "2") { ???????????//停止所以队列 ???????????$aaron.stop(true) ???????} else if (v == "3") { ???????????//停止动画,直接跳到当前动画的结束 ???????????$aaron.stop(true,true) ???????} ????}); ???</script></body></html>

jQuery中停止动画stop

原文地址:http://www.cnblogs.com/zhangmingzhao/p/7499981.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved