当前位置:  编程技术>WEB前端

JQuery动画animate的stop方法使用详解

    来源: 互联网  发布时间:2014-08-25

    本文导语:  animate语法: 代码如下: $(selector).animate(styles,speed,easing,callback) 代码如下: Testing .wrap { position: relative; height: 300px; width: 300px; border:5px solid #FCF; } .wrap div { position: absolute; left: 0;top: 0; height: 50px; width: 50px; background: #FA0; } ...

animate语法:
代码如下:

$(selector).animate(styles,speed,easing,callback)

代码如下:





Testing



.wrap {
position: relative;
height: 300px;
width: 300px;
border:5px solid #FCF;
}
.wrap div {
position: absolute;
left: 0;top: 0;
height: 50px;
width: 50px;
background: #FA0;
}










function moveX(){
$('.wrap div').animate({'left':'250px'},1000).animate({'left':'0px'},1000);
} moveX();

$('#btn1').click(function(){
$('.wrap div').stop(); // 停止当前动画,沿路返回起点,若是返回过程中再点击,会暂停在路中
clearInterval();
})

$('#btn2').click(function(){
$('.wrap div').stop(true); // 停止所有动画 去的路程中点击停止会直接到达终点,若是返回过程中再点击,会暂停在路中
})

$('#btn3').click(function(){
$('.wrap div').stop(true,true); // 停止所有动画 ,去的路程中点击停止会直接到达终点,若是返回过程中再点击,会停止到在起点
})

// .stop() // 停止当前动画
// .stop(true) // 停止所有动画
// .stop(true,true) // 停止所有动画,到达动画终点




.stop(); // 停止当前动画,沿路返回起点,若是返回过程中再点击,会暂停在路中

.stop(true); // 停止所有动画 去的路程中点击停止会直接到达终点,若是返回过程中再点击,会暂停在路中

.stop(true,true); // 停止所有动画 ,去的路程中点击停止会直接到达终点,若是返回过程中再点击,会停止到在起点

    
 
 

您可能感兴趣的文章:

  • jQuery - css() 方法示例详解
  • jquery EasyUI导入js顺序详解
  • jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
  • jQuery focus和blur事件的应用详解
  • jquery操作select详解(取值,设置选中)
  • Jquery中"$(document).ready(function(){ })"函数的使用详解
  • Jquery性能优化详解
  • jQuery插件开发的两种方法及$.fn.extend的详解
  • Jquery遍历修改url请求参数的代码详解
  • jquery选择器之内容过滤选择器详解
  • jquery判断浏览器类型实例详解
  • jquery操作css样式表文件的方法详解
  • Jquery中$命名冲突问题详解
  • 详解jquery的substring,substr,split的用法
  • jquery中each的用法详解
  • jQuery.extend 函数的用法详解
  • jQuery之ajax删除详解
  • jquery与直接写JS的区别详解
  • jquery移除、绑定、触发元素事件使用示例详解
  • jQuery解析JSON数据实例详解
  • jQuery animate方法定位页面具体位置(示例)
  • jQuery.Animator
  • jQuery动画效果animate和scrollTop结合使用实例
  • jquery animate创建动画的小例子
  • jquery animate动画方法使用介绍
  • jquery animate动画函数用法浅析
  • jquery animate动画效果的例子
  • jquery animate实现DIV变化或左右移动
  • jquery animate动画函数用法举例
  • jQuery的animate函数学习记录
  • jQuery animate函数动画过渡效果简介
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery学习笔记之jQuery原型属性和方法
  • jquery中slideUp()方法与slideDown()方法
  • jQuery 滑动方法slideDown向下滑动元素
  • jquery中fadeIn()方法与fadeOut()方法(示例)
  • jquery show()方法与hide()方法的小例子
  • jquery show()方法与hide()方法(示例)
  • jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
  • Jquery图片延迟加载插件jquery.lazyload.js的使用方法
  • 判断一个对象是否为jquery对象的方法
  • jQuery 追加元素的方法如append、prepend、before
  • jQuery获得内容与属性方法
  • jQuery.holdReady()使用方法
  • jquery动态添加元素事件失效问题解决方法
  • jQuery获得内容和属性方法及示例
  • 使用jQuery重置(reset)表单的方法
  • 点击表单提交时出现jQuery没有权限的解决方法
  • jquery获取第几个元素方法示例 jquery选择器
  • Jquery之Bind方法参数传递与接收的三种方法
  • jQuery aminate方法定位到页面具体位置
  • jQuery页面加载完毕再执行代码多种方法
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3