1
jQuery.fn.fade_img = function (ops) {
  var jQueryelem = this;
  var res = jQuery.extend({ delay: 100, speed: 100 }, ops);
  for (var i=0, pause=0, l=jQueryelem.length; i<l; i++, pause+=res.delay) {
   jQueryelem.eq(i).delay(pause).fadeIn(res.speed);
  }
  return jQueryelem;
 };
 jQuery('.fade').fade_img();

Суть такая, что по очереди появляются объекты с классом fade.

А мне нужно добавить условия, чтобы после того как все они появятся, была пауза 2000мс, а потом они все сразу стали невидимые. А потом снова начался цикл с поочередным появлением.

Вот рабочий пример: http://jsfiddle.net/ufaclub/5dwy8x68/1/

1
  • @ufaclub, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом). 21 окт 2014 в 14:32

1 ответ 1

1

Можно с рекурсией. Вторым параметром в fadeIn() передаётся ф-я, которую вызовут по окончании анимации.

jQuery.fn.fade_img = function (userOps) {
    var $el = this
        ,opt = jQuery.extend({ delay: 500, speed: 500},userOps)
        ,l = this.length
        ,i = -1
        ,fadeMe = function() {
            i++;
            if( i<l) $el
                .eq(i)
                .delay(opt.delay)
                .fadeIn(opt.speed, fadeMe);
            else if( i==l) {
                i = -2;
                $el.fadeOut(opt.speed, function(){
                    if( i == -2) {
                        i = -1;
                        setTimeout( fadeMe.bind( $el), opt.delay)
                    }
                });
            }
        }
    ;
    fadeMe();
    return this;
};
jQuery('.fade').fade_img();

Рабочий пример.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.