javascript - 使用 jquery 显示更新

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))
    }

});