jQuery翻牌或百叶窗效果

开发 后端
这里只总结一下:1.定时器clearInterval,先前我写在了外面,应该是写在setInterval里面。2.当不确定布尔是什么值的时候,可以这样写:timer = !timer;

效果预览:

 

动态效果请进入:http://www.cnblogs.com/lufy/archive/2012/06/07/2539744.html观看

  1. $(function(){  
  2.     var timer = true//执行向上或向下的开关  
  3.     var liindex = 0;    //LI的索引  
  4.     var $div = $(".byc").find("div");      
  5.       
  6.     //每隔三秒执行一次变换LI的内容  
  7.     var set1 = setInterval(function(){  
  8.             ainbyc($div);  
  9.             liindex = 0;  
  10.             timer = !timer;  
  11.     },3000);  
  12.     //LI变换的方式,即每隔100ms,让下一个LI移动top值;  
  13.     function ainbyc(ds){  
  14.         var set2 = setInterval(function(){  
  15.             //所有的LI移动完毕,就清除  
  16.           if(liindex == $div.length){  
  17.             clearInterval(set2);  
  18.             //向上  
  19.           }else if(timer){  
  20.             ds.eq(liindex).animate({"top":0},100);  
  21.             //向下  
  22.           }else{  
  23.             ds.eq(liindex).animate({"top":-25},100);  
  24.           }  
  25.           liindex++;  
  26.         },100);          
  27.     }      
  28. }) 

详细分析请进入:http://bbs.miaov.com/forum.php?mod=viewthread&tid=5578观看视频,这里只总结一下。

1.清除定时器clearInterval,先前我写在了外面,应该是写在setInterval里面。

2.当不确定布尔是什么值的时候,可以这样写:timer = !timer;

DEMO下载

责任编辑:张伟 来源: 船长op的博客
相关推荐

2023-09-28 10:21:44

CSS前端

2018-08-31 15:44:02

数字化转型Riverbed

2012-06-13 15:21:26

jQuery

2012-04-26 10:56:05

jQuery效果

2010-09-07 09:30:25

DIV弹出jQuery

2012-05-30 10:43:47

jQuery

2009-09-23 17:19:19

jQuery页面渐显效

2023-09-12 11:36:15

携程模型

2011-03-30 14:33:57

jQueryJavaScript

2012-06-05 09:38:39

PHP

2012-08-22 10:28:03

jQuery

2012-05-09 13:45:04

jQuery

2012-10-08 10:27:56

jQueryJSJavaScript

2019-07-16 09:14:51

华为美国裁员

2013-12-10 13:32:45

百度百度分发

2012-04-10 10:41:59

jQueryASP.NET

2011-04-15 09:29:20

jQueryFlash

2012-04-09 10:34:21

jQuery

2021-12-26 00:29:18

百度裁员直播

2011-09-02 13:57:11

jQuery
点赞
收藏

51CTO技术栈公众号