Последовательные эффекты на элементы списка в jQuery

Question

вот фрагмент моего кода:

<ul>
    <li><a href="home">Home</a></li>
    <li><a href="links">Links</a></li>
    <li><a href="contact">Contact</a></li>
</ul>

Я использую css для их горизонтального стиля (как в меню), и я хотел бы анимировать все элементы списка элемента <ul>. Я опускаю их, когда дом готов, и анимирую их до дна, чтобы привлечь внимание пользователей, когда вся страница загружена.

вот код jquery:

$(function(){
    $("ul li").css('top', '-40px'); //items are in relative position

    $(window).bind("load", items_animate, false);
});

function items_animate(){
       ... //I'd like to animate each <li> of the <ul> changing 'top' to '0px' but not simultaneously, I want to declare a DELAY between each animation (<li>'s get down in a row)
}

Я знаю, как последовательно упорядочивать эффекты с помощью queue () или вызывать функции, но только для одного элемента, в этом случае я потерялся ..

РЕДАКТИРОВАТЬ: для тех, кто заинтересован, вот код для выполнения этой последовательности, благодаря Джозефу

var animationDelay = 600;
var offset = 200;

function blah(meh) {
    setTimeout(function(){
        $(meh).animate({
            opacity: "0"
        }, animationDelay);
    },$(meh).index() * offset)
}

$("li").each(function(){
    blah(this);
})

Answer 1

Демо

---

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

---

<ul>
    <li><a href="home">Home</a></li>
    <li><a href="links">Links</a></li>
    <li><a href="contact">Contact</a></li>
</ul>

var animationDelay = 600;
var offset = 200;

function blah(meh) {
    setTimeout(function(){
        $(meh).animate({
            opacity: "0"
        }, animationDelay);
    },$(meh).index() * offset)
}

$("li").each(function(){
    blah(this);
})

_{* простите меньше оригинальных имен ... уже поздно: P}

Answer 2

Попробуйте что-то вроде этого:

$(function() {
    function animateSequentially(element, properties, duration) {
        element.animate(properties, duration, function() {
            animateSequentially(element.next(), properties, duration);
        });
    }
    animateSequentially($("ul > li:first-child"), {top: '0'}, 1000);
});

Редактировать: Если вы хотите, чтобы они анимировались последовательно, но не ждали предыдущего, вы можете попробовать это:

$(function() {
    $("ul > li").each(function(index, item) {
        setTimeout(function() {
            $(item).animate({top: '0'}, 500);
        }, index*175);
    });
});

Попробуйте тот, который ждет здесь , или тот, который не ждет здесь .

Answer 3

function slide_down_recursive(e,duration,callback)
{
    $(e).animate(
    {
        top: '0px'
    }, duration, 'linear',function()
    {
        if($(e).next().length == 0)
        {
            if(typeof(callback) == 'function')
            {
                callback();
            }
            return;
        }
        else
        {
            // Apply recursion for every sibling.
            slide_down_recursive($(e).next(),duration,callback);
        }
    });

} // End slide_down_recursive
slide_down_recursive($('li:first-child'),500);

Вот демоверсия: http://jsfiddle.net/rpvyZ/

Answer 4

на момент запроса я написал плагин jQuery для последовательного просмотра списка (любых) элементов и применения изменений css.

Вы можете оформить плагин здесь:

https://github.com/ieservices/frontend-components/tree/master/jQuery/Plugins/jquery.list-effects

Там я очень легко применил эти эффекты, определив список и параметры эффектов как объект JavaScript. Для первой версии я создал возможность определить задержку изменений между элементами, а также опции для определения начального индекса, чтобы определить, к какому элементу должны применяться изменения.

С помощью плагина вы можете сделать что-то вроде этого:

<div id="myList">
<h4>This is my list</h4>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

Применяя изменения таблицы стилей CSS, вращая элементы списка:

jQuery('#myList ul li').listEffect(
  {delay: '2000', attribute: 'color', value: '#ccc'}
);

Также я создал и демоверсию в репо, которая доступна здесь:

https://github.com/ieservices/frontend-components/blob/master/jQuery/Plugins/jquery.list-effects/demo/list-effects-demo-simple.html

Итак, пока он мало что может сделать, но что вы, ребята, думаете об этом плагине?

Answer 5

Используйте функцию обратного вызова .animate s для анимации следующего элемента.

  $('li:eq(0)').animate({
    top: "0px"
  }, 5000, function() {
    $('li:eq(1)').animate({
      top: "0px"
    }, 5000, function() {
      ...
    });
  });