используя jquery для показа обновлений - PullRequest
Новая
       6

используя jquery для показа обновлений

2 голосов
/ 17 октября 2011

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

Ответы [ 2 ]

2 голосов
/ 17 октября 2011

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

});
0 голосов
/ 17 октября 2011

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