Отображение элементов один за другим - PullRequest
Новая
       1

Отображение элементов один за другим

3 голосов
/ 23 февраля 2012

Я часто вижу подобные вопросы, и есть несколько решений. Я пытаюсь придумать что-то короткое, что можно использовать повторно. У меня вопрос, учитывая следующий код, нужно ли мне clearTimeout() и где это сделать? А также, что бы вы улучшили? Насколько хорош или плох этот кусок кода для производительности?
http://jsfiddle.net/elclanrs/fQX8M/15/

var fade1by1 = function ($elms, props) {

    props = props || {};
    props.delay = props.delay || 1; // s
    props.speed = props.speed || 400; // ms
    props.ease = props.ease || 'linear';

    for (var i=0, d=0, l=$elms.length; i<l; i++, d+=props.delay*1000) {
        (function (i, d) {
            // Using `delay()` instead of `setTimeout()`
            // as Alexander suggested
            $elms.eq(i).delay(d).fadeIn(props.speed, props.ease);
        })(i, d);
    }
};

Ответы [ 3 ]

0 голосов
/ 23 февраля 2012

Мне кажется, вы должны сделать это с помощью обратного вызова функции fadeIn. Что-то вроде следующего должно достигнуть всех ваших целей (замените их в новых параметрах): 

var customFade = function(parent, speed){
    $(':hidden:first', parent).fadeIn(speed, function(){
        customFade(parent, speed)
    });
}
$('button').click(function(){ customFade($('ul'), 1000); });
0 голосов
/ 23 февраля 2012

Вместо одновременной установки всех действий со все более длительными периодами ожидания, другой подход состоит в том, чтобы привязать поведение показа непосредственно к каждому выбранному элементу как пользовательское событие и включить в эту связанную функцию фиксированный период ожидания плюс вызов триггера.пользовательское событие «следующего» элемента, если оно присутствует.Чтобы начать, просто зажгите предохранитель первого элемента.

Итак, что-то вроде этого: 

var fadeCascade = function fadeCascade(your_selector, props) {
  props = props || {};
  props.delay = props.delay || 1; // s
  props.speed = props.speed || 2000; // ms
  props.ease = props.ease || 'linear';

  $(your_selector)
    .addClass('showme') // Being a little lazy here, but it works
                        // You could work out an inspection by attached event
    .bind('showme', function() { // custom event 
      $(this)
        .delay( props.delay * 1000 )
        .fadeIn(props.speed, props.ease, function() {
          $(this).nextAll('.showme:first').trigger('showme'); // jqueryish recursion
      });
    }).hide() // or just hide in initial css
  .first().trigger('showme'); // set the dominoes falling
};

И для запуска откройте: 

fadeCascade('div.bar');​

Если вас беспокоит гигиена, вы можете отменить привязку событий и удалить классы по ходу работы.

Пример: http://jsfiddle.net/redler/EKx6s/1/

Обновление: добавлена ​​задержка, спасибо @ Александр.

0 голосов
/ 23 февраля 2012

Не думаю, что вам нужно window.clearTimeout, так как не похоже, что вы хотите остановить анимацию. Если вы все еще не определились, то как насчет использования .delay , оно явно использует также window.setTimeout. 

var fade1by1 = function ($elms, speed) {
    speed = speed || 1; // Seconds
    for (var i=0, s=0, l=$elms.length; i<l; i++, s+=speed*1000) {
        $elms.eq(i).delay(s).fadeIn('slow');
    }
};

См. Это в действии здесь .

...