Question

我正在尝试为列表创建2个按钮以slideUp和slideDown列表。 slideUp有效，它将第一个项放在最后一个项目之后，但是slideDown不能正常工作。

HTML：

<button class="button" type="button">UP</button>
<ul id="ulLatestNews">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
<button class="button2" type="button">DOWN</button>

jQuery的：

$(document).ready(function(){
  $(".button").click(function(){
      $("#ulLatestNews li:first").slideUp(200, function () { $(this).appendTo($("#ulLatestNews li:last")).slideDown(); });
  });
  $(".button2").click(function(){
      $("#ulLatestNews li:last").slideDown(200, function () { $(this).appendTo($("#ulLatestNews li:first")).slideUp(); });
  });
});

以下是jsfiddle上的代码：http://jsfiddle.net/2U9qZ

谢谢！

Answer 1

尝试

$(document).ready(function(){
   $(".button").click(function(){
     $("#ulLatestNews li:first").slideUp(200, function () {              
         $(this).appendTo($("#ulLatestNews li:last")).slideDown(); });
     });

     $(".button2").click(function(){
        $("#ulLatestNews li:last").slideDown(200, function () {        
           $(this).prependTo($("#ulLatestNews li:first")).slideDown(); 
       });
   });
});

固定小提琴：

http://jsfiddle.net/2U9qZ/2/

Answer 2

你需要将元素追加并预先加入UL本身，否则你将把元素添加到另一个LI中

demo

$(document).ready(function () {
    $(".button").click(function () {
        $("#ulLatestNews li:first").slideUp(200, function () {
            $(this).appendTo($("#ulLatestNews")).slideDown();
        });
    });
    $(".button2").click(function () {
        $("#ulLatestNews li:last").slideDown(200, function () {
            $(this).prependTo($("#ulLatestNews")).slideDown();
        });
    });
});

jQuery ul li slideUp / slideDown

2 个答案: