zoukankan      html  css  js  c++  java
  • jQuery队列控制方法详解queue()/dequeue()/clearQueue() Leone

    http://www.cnblogs.com/mrthink/archive/2010/12/02/1894143.html <!doctype html> <html> <head> <meta charset="gbk"> <title>jQuery队列控制方法详解queue()/dequeue()/clearQueue()</title> <link rel="stylesheet" href="http://mrthink.net/demo/css/base.css" /> <style> input{margin:10px 0 10px 50px;padding:3px 8px; font-size:14px;font-weight:bolder;} #demo{position:relative;630px;height:300px;background:#eee;border-top:5px solid #888;border-bottom:5px solid #888} .one,.two,.three,.four,.five,.six,.seven{display:block;position:absolute;left:30px;top:0;30px;height:30px;background:#888;color:#fff;text-align:center;font-weight:bold;line-height:30px} .two{left:120px} .three{left:210px} .four{left:300px} .five{left:390px} .six{left:480px} .seven{left:570px} </style> </head>
    <body><!--DEMO start--><input type="button" value="停止动画" /><div id="demo"><span class="one">01</span><span class="two">02</span><span class="three">03</span><span class="four">04</span><span class="five">05</span><span class="six">06</span><span class="seven">07</span></div><!--DEMO end--><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script> $(function(){ var _slideFun=[ //把要执行的动画依次放入一个数组 function(){$('.one').delay(500).animate({top:'+=290px'},500,_takeOne);}, function(){$('.two').delay(300).animate({top:'+=290px'},500,_takeOne);}, function(){$('.three').delay(300).animate({top:'+=290px'},500,_takeOne);}, function(){$('.four').delay(300).animate({top:'+=290px'},500,_takeOne);}, function(){$('.five').delay(300).animate({top:'+=290px'},500,_takeOne);}, function(){$('.six').delay(300).animate({top:'+=290px'},500,_takeOne);}, function(){$('.seven').delay(300).animate({top:'+=290px'},500,function(){ alert('按序落体运动结束! Yeah!'); });} ]; //将函数数组放入slideList动画队列 $('#demo').queue('slideList',_slideFun); var _takeOne=function(){ //取出第一个函数,并执行它 $('#demo').dequeue('slideList'); }; //初始执行第一个函数 _takeOne(); $(':button').click(function(){ $(this).val('刷新重试').attr('disabled',true).css('color','#ccc'); //停止也可用载入空数组实现$('#demo').queue('slideList',[]); $('#demo').clearQueue('slideList'); }); }); </script></body></html>
  • 相关阅读:
    C# 文件重命名
    C# 获取图像文件
    我开通了博客
    C# 图像截取
    C# 从txt读取内容
    Linux 下查看用户组信息
    部署Jenkins完整记录
    一篇文章搞定Java注解^_^
    Java基础之接口
    枚举让盗版美国总统wcc给你整明白哈哈
  • 原文地址:https://www.cnblogs.com/doseoer/p/4007611.html
Copyright © 2011-2022 走看看