jQuery - добавить элементы списка в существующий список с постепенной анимацией - PullRequest
Новая
       13

jQuery - добавить элементы списка в существующий список с постепенной анимацией

2 голосов
/ 13 ноября 2010

Итак, у меня есть список: 

<ul>
 <li> bla bla </li>
 <li> bla bla </li>
 ...
</ul>

<a> click me </a>

при нажатии на ссылку запускается ajax-запрос, который извлекает больше элементов списка.

Как я могу добавить эти новые элементы в существующий список (где находятся точки), и анимировать их один за другим, используя например. скольжение, небольшая пауза, слайд следующего предмета, небольшая пауза и т.д ...?

сейчас у меня есть это, которое анимирует все элементы списка одновременно: 

  $.ajax({
      ... 
      success: function(response){

           $(response).appendTo("ul").hide().animate({
            "height": "show",
            "marginTop": "show",
            "marginBottom": "show",
            "paddingTop": "show",
            "paddingBottom": "show"},
            { duration: 333 });
      ...

1 Ответ

3 голосов
/ 13 ноября 2010

Вы можете добавить .delay() на основе индекса, например: 

jQuery(response).appendTo("ul").hide().each(function(i) {
   jQuery(this).delay(400*i).animate({
        "height": "show",
        "marginTop": "show",
        "marginBottom": "show",
        "paddingTop": "show",
        "paddingBottom": "show"}, 333);
});

Это запускает первое мгновенно (400 * 0), второе 400 мс (400 * 1) позже (задержка 67 мс) и т. Д. Просто настройте задержку на то, что вы хотите, но это простой способ получить одно- один за другим стиль анимации.

...