2018-06-27

作者: 老头子_d0ec | 来源:发表于2018-06-27 16:54 被阅读0次

用了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>

相关文章

网友评论

    本文标题:2018-06-27

    本文链接:https://www.haomeiwen.com/subject/gdciyftx.html