Выдвиньте и исчезните эффект, используя jQuery и localScroll

Question

Я использую localScroll для создания слайдера контента. Проблема в том, что я хочу придать эффекту исчезновения div, который я выдвигаю, чтобы он исчезал до того, как исчез. У кого-нибудь есть идеи, как я могу это сделать? Я пробовал что-то с onBefore и onAfter, но я не получил то, что ожидал.

Спасибо!

LE: вот код, который я использую:

$(document).ready(function() {  
      var localScroll = $('#slider .slideshow-wrapper')
      var localSections = $('#slider .slideshow-wrapper ul.slideshow li');
      var local = $('#slider ul.slideshow');
      local.css('width', localSections[0].offsetWidth * localSections.length);

      var localScrollOptions = {
        target: localScroll,
        items: localSections,
        navigation: 'ul.tabs li a',
        hash: 'false',
        axis: 'xy',
        duration: 500,
        easing: 'swing'
        //onAfter: fadeAway
      };
      $('.container').serialScroll(localScrollOptions);

      $('ul.tabs').find('a span').click(selectNav);


  });

Answer 1

Вы не можете использовать fadeOut, потому что он устанавливает стиль div на display:none, и, следовательно, div имеет нулевую высоту и ширину, что делает плагин scrollTo очень плохим. Я бы предложил использовать непрозрачность. В приведенном ниже коде я установил минимальную непрозрачность на 0,2, потому что, когда я установил ее на ноль, было трудно сказать, что содержимое прокручивается.

Я взял демонстрацию LocalScroll и внес эти изменения - похоже, она работает довольно хорошо. Я не пытался сопоставить ваш код, потому что я знаю, что приведенный ниже код работает с демо-версией, а в заголовке вашего вопроса указано localScroll, но ваш код использует serialScroll. В любом случае, я предполагаю, что ul.slideshow li в вашем коде должно быть эквивалентно .sub в приведенном ниже коде.

$.localScroll({
 target: '#content', // could be a selector or a jQuery object too.
 queue: false,
 duration: 500,
 hash: false,
 easing: 'swing',
 onBefore:function( e, anchor, $target ){
  // The 'this' is the settings object, can be modified
  $('.sub').animate({ opacity: 0.2 }, 250);
 },
 onAfter:function( anchor, settings ){
  // The 'this' contains the scrolled element (#content)
  $(anchor).animate({ opacity: 1 }, 250);
 }
});

Редактировать: я разместил демо на этом pastebin

Answer 2

См .: http://docs.jquery.com/Effects/queue