|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?注册
x
标题块的无缝上移的jq动画效果的实现
var wuf; //无缝上移动画函数 function wufeng(){ //设置定时器实现不停上移 wuf = setInterval(function(){ //把整个内容的列表div整体往上移动一个标题的高度动画 $('.caselink').animate({marginTop:'-24px'},1000,function(){ //移动后把第一个遮住的li移动到整个内容div里面的最小面去,就是把第一个li放到最后一个li位置 $(this).children('li').eq(0).appendTo('.caselink'); //然后把整个内容的div设置回来,这时候原来的第二个li在第一的位置 $(this).css('margin-top','0px'); }); },1500); } //鼠标移动内容上时清理定时器,停止滚动,移除继续调用 $('.caselink').hover(function(){ clearInterval(wuf); },function(){ wufeng(); }); //默认执行 wufeng(); 整体效果的实现就是通过 setInterval 定时器不停的执行当前div jq 动画上移一个内容列表标题的一个高度,然后把第一个标题填充到整个内容的内末尾的同时把整个div 没动画的下移到原来的位置,整个过程就是不停的动画上移内容,把一个标题放到底部同时内容位置还原的一系列动作。 |
|