2018-06-27

用了jQuery的动画以后确实感觉少了好多代码。。。然而突发奇想怎么实现动画循环呢?

<script>

var direction='right';

(function() {

var css = {

'left': '10%'

};

if(direction === 'right') {

direction = 'left';

<span style="white-space:pre"> </span>css.left = '90%';

} else {

direction = 'right';

}

$('.arrow').animate(css, arguments.callee);//返回正在被执行的函数

})();

</script>

传统方案,setinterval函数加animate完全不用动脑。。。只需要setinterval函数周期执行animate函数即可,两个函数时间参数要一致

<script>
var css = {left:'500px'};
setInterval(function(){
$('.arrow').animate(css,300,rowBack);
},300);
function rowBack(){
if(css.left==='50px')
css.left='500px';
else if(css.left==='500px')

css.left='50px';
}
</script>

纯jQuery解决方案,animate的回调函数再次调用自身,类似递归。。。额貌似就是递归。。。个人感觉这种方法最好,暂时没发现效能问题。。。

<script>

var css = {left:'500px'};

$('.arrow').animate(css,300,rowBack);

function rowBack(){

if(css.left==='50px')

css.left='500px';

else if(css.left==='500px')

css.left='50px';

$('.arrow').animate(css,300,rowBack);

}

</script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,887评论 0 1
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,045评论 0 2
  • 问题描述 静态博客托管在github上诚然是一件非常不错的事情,但是github在国内访问速度很慢,而且经常因为违...
    figotan阅读 1,000评论 2 50
  • 星期六 晴 张荣轩妈妈 今天班里开家长会,早上爸爸去开会,妈妈送你去学象棋,可能是周六,一家人都起的有点晚,...
    爱意暖人心阅读 122评论 0 1
  • 【经文】使徒行传15:11我们得救,乃是因主的恩,和他们一样,这是我们所信的。 约翰福音1:12凡接待他的,就是信...
    斐斐feifei阅读 1,574评论 0 0