jQuery Функция fadeTo() для всех divs

Я пытаюсь добиться эффекта, когда я исчезаю во всех указанных divs, один за другим. Я написал эту функцию:jQuery Функция fadeTo() для всех divs

JQuery:

(function($) { 
    $.fn.fadeAll = function (options) { 
     options = $.extend({}, $.fn.fadeAll.defaults, options || {}); 

     var loops = $(this).length; 

     return $(this).each(function (i, obj) {    
      $(obj).fadeTo(options.speed, options.opacity); 

      if (i++ >= loops) { 
       if (typeof (options.onComplete) == 'function') { 
        options.onComplete.call(); 
       } 
      } 
      //alert($(obj).html()); 
     }); 
    }; 

    $.fn.fadeAll.defaults = { 
     speed:  300, 
     opacity: 1, 
     onComplete: null 
    }; 
})(jQuery);

В каждом цикле я ставлю предупреждение, чтобы наблюдать это цикл через все мои объекты, которые он делает очень хорошо, когда я называю это как так

Вызов функции:

$('.nav-div').fadeAll({ 
    onComplete: 
     function() { 
      alert('done'); 
     } 
    });

HTML:

</head> 
<body> 
    <section id="global-wrapper"> 
     <section id="load-wrapper"> 
      <div> 
       <h1>LOADING</h1> 
       <h3 id="load-percent"></h3> 
      </div> 
     </section> 
     <section id="main-wrapper"> 
      <h1>TITLE</h1> 
      <nav> 
       <div class="nav-div">MENU ITEM 1</div> 
       <div class="nav-div">MENU ITEM 2</div> 
       <div class="nav-div">MENU ITEM 3</div> 
       <div class="nav-div">MENU ITEM 4</div> 
      </nav> 
     </section> 
    </section> 
</body> 
</html>

CSS:

body { 
    background: #000; 
    color: #eee; 
} 

#global-wrapper { 
    min-height: 2000px; 
} 

#load-wrapper { 
    margin: 0 auto; 
    width: 65%; 
    height: 400px; 
    position: absolute; 
    top: 200px; 
    left: 17.5%; 
} 
    #load-wrapper > div { 
     background: url('/Content/Images/loading.gif') center center no-repeat; 
     width: 100%; 
     height: 300px; 
    } 
     #load-wrapper > div > h1 { 
      font-family: 'IM Fell DW Pica', serif; 
      font-size: 30px; 
      color: #eee; 
      text-align: center; 
      line-height: 100px; 
     } 
     #load-wrapper > div > h3 { 
      font-family: 'IM Fell DW Pica', serif; 
      font-size: 30px; 
      color: #eee; 
      text-align: center; 
      line-height: 100px; 
      margin-top: 100px; 
     } 

#main-wrapper { 
    margin: 0 auto; 
    width: 1024px; 
} 
    #main-wrapper > h1 { 
     opacity: 0; 
     font-size: 30px; 
     font-family: 'IM Fell DW Pica', serif; 
    } 
    #main-wrapper > nav > div { 
     opacity: 0; 
     float: left; 
     margin-right: 20px; 
     font-family: Gruppo; 
     font-size: 18px; 
     cursor: pointer; 
    }

Все мои обратных вызовов работают как и ожидалось, все стреляя. Тем не менее, моя проблема заключается в том, что пока он проходит цикл, на самом деле это не делает часть fadeTo; скорее, он ждет, пока он не закончит проходить через петлю, тогда они все сразу исчезнут.

Может ли кто-нибудь указать, что я делаю неправильно здесь? Я уверен, что это что-то простое, что мне не хватает или просто некоторые функции jQuery/js, которые мне не хватает. Любая помощь очень ценится!

источник

2013-09-19 Ben Black

Я создал [скрипку] (http://jsfiddle.net/U2aT4/) для него, но, когда она должна исчезать ? Я не вижу никаких событий в вашем коде. –

Я не хочу, чтобы он исчезал, он просто исчезает в пунктах меню один за другим, чтобы придать ему хороший эффект при загрузке страницы. –

О, извините, я неправильно понял, это означает, что у предметов есть непрозрачность 0 при загрузке страницы? Я не знаю нигде. Я посмотрю и попробую, что смогу сделать –

вы можете использовать задержку см эту скрипку

http://jsfiddle.net/U2aT4/7/

$(document).ready(function() { 
$('.nav-div').hide(); 
    delay=0; 
    $('.nav-div').each(function(){ 
     $(this).delay(delay).fadeIn(1000); 
     delay += 1500; 

    }); 

});

источник

2013-09-19 14:25:31

Очень приятное решение, может быть, вы можете изменить его, чтобы он входил в плагин из OP? –

Это сделало это! Я включил задержку в функцию, которую я писал, и это заставило ее работать. Благодаря тонну! –

лучше было бы сделать рекурсивную функцию, используя встроенную функцию обратного вызова из fadeIn. это требует немного больше мышления ... –

ответ

Смежные вопросы