jquery animate动画持续运动的实例
如下所示:
function fingers(){ $(".box01 .fingers").animate({"width":"7.5rem","marginLeft":"-3.75rem"},500,function(){ $(".box01 .fingers").animate({"width":"6.8rem","marginLeft":"-3.4rem"},500,fingers()); }); } fingers();
如上,想要实现左右持续运动,则把该动画封装为一个函数,再反复调用就好。
以上这篇jquery animate动画持续运动的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
jquery animate 动画效果使用说明
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity").注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就
-
jQuery动画效果animate和scrollTop结合使用实例
CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). 复制代码 代码如下: $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 上面的代码表示滚动条跳到0的位置,页面移动速度是800.结合scrollTop实用示例: 复制代码
-
jQuery中animate动画第二次点击事件没反应
用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:"-300px"}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部-300px的位置,第二次点击时的并不是page在移动后的位置继续t移动-300px,
-
jQuery动画animate方法使用介绍
复制代码 代码如下: $(function() { $("#left").click(function(){ $(".block").show(); $(".block").animate({ width: "+200px", height: "+200px", fontSize: "1em", borderWidth: 10 }, "slow","swin
-
jquery中animate动画积累的解决方法
昨天一同学向我求助,说做了一个简单的动画效果,就是图片自动左右播放 复制代码 代码如下: <span style="white-space:pre"> </span>/* 无缝式焦点图 */ var _left = 770; var left = -_left;//-770 function slideImg() { if(left == -3080 || left == 0) { _left = -_left; } $('.slidepics').animat
-
原生js仿jquery animate动画效果
jquery animate动画效果: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{margin:0;padding:0;} .box{width: 400px;height: 300px;background: #000;margin:40
-
jQuery中使用animate自定义动画的方法
动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一下2组动画设置的区别. $(elem).fadeOut(3000) $(elem).animate({ opacity:0 },3000) 显而易见,animate方法更加灵活了,可以精确的控制样式属性从而执行动画. 语法: 1 .animate( properties [, duration ]
-
JQuery animate动画应用示例
本文实例讲述了JQuery animate动画.分享给大家供大家参考,具体如下: 滑动选项卡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .btns input{ width: 100px; h
-
JQuery动画animate的stop方法使用详解
animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="stylesheet" href="css
-
js实现类似jquery里animate动画效果的方法
本文实例讲述了js实现类似jquery里animate动画效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,functio
随机推荐
- 用vbscript实现将脚本的输出复制到剪贴板
- Redis集合类型的常用命令小结
- 解决Office2003找不到SKU011.CAB问题方法
- 浅谈Java多线程处理中Future的妙用(附源码)
- Asp.net mvc 数据调用示例代码
- JS中令人发指的valueOf方法介绍
- 关于JS与jQuery中的文档加载问题
- php smarty truncate UTF8乱码问题解决办法
- Pyramid Mako模板引入helper对象的步骤方法
- Python中的defaultdict模块和namedtuple模块的简单入门指南
- 一个简单的JAVA字符集过滤器实现
- CoordinatorLayout的使用如此简单(Android)
- Android中通知Notification使用实例(振动、灯光、声音)
- Windows 8.1下MySQL5.7 忘记root 密码的解决方法
- jquery css实现邮箱自动补全
- C语言中的abs()函数和exp()函数的用法
- ionic2自定义cordova插件开发以及使用(Android)
- JavaScript检查弹出窗口是否被阻拦的方法技巧
- Add a Table to a Word Document
- javascript ready和load事件的区别示例介绍