Блог

У меня есть около 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();
                  });
            });
        })();
  

попробуйте это, вы можете изменить настройки по своему усмотрению: вы можете установить минимальную высоту для 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))
    }

});
  

$(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()

Редактировать

Если подумать об этом подробнее, благодаря Грегу, showThisTat() будет запускаться дважды каждые 1500 мс, увеличиваясь экспоненциально. Кроме того, первая строка может работать только с первым списком. Итак, вот редактирование;

 $(".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);
              });
        });
    })();