如何使用jQuery和append方法来滑动元素？

我想滑动列表，并希望循环它，当最后一个孩子的动画结束第一个将被添加到最后我试图使用.append（）方法，但它不工作。请在这方面帮助我。如何使用jQuery和append方法来滑动元素？

#navigation{ 
height: 200px; 
margin: 0; 
overflow: hidden; 
padding: 0; 
position: relative; 
width: 200px; 
     } 
li { 
    border: 1px solid #CCCCCC; 
    float: left; 
    height: 198px; 
    list-style: none outside none; 
    width: 198px; 
    position: relative; 
} 

<div><ul id="navigation"> 
       <li class="active">List 1</li> 
       <li>List 2</li> 
       <li>List 3</li> 
      </ul></div> 



setInterval(function slider(){    

$("#navigation li").addClass("active").animate({       
        top : "-=198" 
       },function(){ 
        $("#navigation li").removeClass("active").next().addClass("active"); 
        $("#navigation").append($("#navigation li:first"); 
       }); 

       },1000);

来源

2014-01-27 Abdul Gaffar Shah

试试这样说：

setInterval(function slider(){ 
    var act = $('#navigation li'); 
    act.animate({ 
     top: '-198px' 
    },function(){ 
     act.css('top','0').first('li').appendTo('#navigation') 
    }); 
    },4000)

入住这Demo Fiddle

来源

2014-01-27 16:21:40 DaniP

丹科布拉沃！愿上帝保佑你。这就是我一直在寻找的东西。你解决了我的问题。 Thanx Thanx很多 –

我创建了一个jsFiddle。你能再次解释你想要再次实现的目标吗？该小提琴将动画显示每个列表项onLoad。我将你的文本设置显示修改为无。然后用jQuery循环访问列表项并使用slideDown函数创建动画。希望这至少能让你更接近你正在寻找的东西。

$("li").each(function(index) { 
    $(this).slideDown("slow", function() { 
    // Animation complete. 
    }); 
});

jsFiddle - Animate list items

来源

2014-01-27 15:53:13 dthartman

thanx您快速支持可以请你完成整个代码，我试过，但没有工作。 –

看看Danko的帖子。我认为这正是你正在寻找的。 Upvote for Danko。确保你接受他的回答:) – dthartman

如何使用jQuery和append方法来滑动元素？

回答

相关问题