Slide out and fade effect using jQuery and localScroll

Question

Hi guys!

I'm using localScroll to create a content slider. The problem is that I want to give a fade effect to the div that I'm sliding out, to make it fade before it disappears. Does anyone have any idea how can I make this? I tried something with onBefore and onAfter but I didn't get what I expected.

Thanks!

LE: here is the code that I'm using:

$(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

See: http://docs.jquery.com/Effects/queue

Answer 2

You can't use fadeOut because it sets the div style to display:none and thus the div has a zero height and width making the scrollTo plugin mess up pretty bad. I would suggest using opacity. In the code below I set the minimum opacity to 0.2 because when I set it to zero, it was hard to tell the content was scrolling.

I took the LocalScroll Demo and made these modifications - it seems to work pretty well. I didn't try to match your code because I know the code below works with the demo and your question title says localScroll but your code uses serialScroll. Anyway, I'm guessing the ul.slideshow li in your code should be equivalent to the .sub in the code below.

$.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);
 }
});

Edit: I posted a demo at this pastebin