Question

我有8个产品/服务，我想根据使用过

等服务的用户显示更新

Product 1
smith used this service 8 hours ago

Product 2
neo used this service 10 hours ago

现在我已经按时间获取用户列表并填充为列表

product 1
<ul class="ncls">
<li>Smith used this service 10 hours ago</li>
<li>Trinity used this service 11 hours ago</li>
<li>Morpheus used this service 12 hours ago</li>
</ul>

Product 2
<ul class="ncls">
<li>Neo used this service 3 hours ago</li>
<li>Oracle used this service 2 years ago</li>
</ul>

我正在尝试编写一个jquery脚本，该脚本将显示列表中的一个项目然后淡化它并显示下一个项目。

到目前为止，我已经做到了这一点，但是没有用。所以关于如何让它发挥作用的任何想法。

$(".ncls").children().hide().eq(0).show();
        (function showThisTat(){
            $('.ncls li:visible').delay(1500).fadeOut('slow',function(){
                  $(this).appendTo(this);
                  $('.ncls li:first').fadeIn('slow',function(){
                      showThisTat();
                  });
            });
        })();

Answer 1

试试这个你可以在你认为合适的情况下弄乱你的设置：你可能想在ul上设置一个最小高度，这样它就不会上下跳动。 http://jsfiddle.net/vt5u6/3/

$(document).ready(function() {

    var lists = $(".ncls");
    var listsLength = lists.length;
    var rotateDelay = 3500;
    var fadeDelay = 444;

    function swapItems(theList) {
        var current = theList.find("li:visible");
        current.fadeOut();
        if (current.next("li").length == 0) {
            theList.find("li").eq(0).delay(fadeDelay).fadeIn()
        } else {
            current.next("li").delay(fadeDelay).fadeIn();
        }
    }

    function createRotatingList(theList) {
        var listItems = theList.find("li");
        var listItemsLength = listItems.length;

        for (j = 0; j < listItemsLength; j++) {
            listItems.eq(j).hide();
        }

        listItems.eq(0).show();

        setInterval(function() {
            swapItems(theList)
        }, rotateDelay)


    }

    for (i = 0; i < listsLength; i++) {
        createRotatingList(lists.eq(i))
    }

});

Answer 2

$(this).appendTo(this);？

也许;

$(".ncls").children().hide().eq(0).show();
    (function showThisTat(){
        $('.ncls li:visible').delay(1500).fadeOut('slow',function(){
              $(this).appendTo($(this).parent());
              $('.ncls li:first').fadeIn('slow',function(){
                  showThisTat();
              });
        });
    })();

注意到$(this).parent()

修改

考虑到这一点，感谢Greg，showThisTat（）每1500ms会发射两次，呈指数增长。此外，第一行可能仅适用于第一个列表。所以，这是一个编辑;

$(".ncls").children().hide(); $(".ncls").children(":first-child").show(); (function showThisTat(list){ (list ?? $('.ncls li:visible')).delay(1500).fadeOut('slow',function(){ var currentList = $(this).parent(); $(this).appendTo(currentList); $('.ncls li:first').fadeIn('slow',function(){ showThisTat(currentList); }); }); })();

使用jquery显示更新

2 个答案: