Take the 2-minute tour ×

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.


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

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

share|improve this question
Could you post your code? –  SolutionYogi Jul 14 '09 at 17:42
SolutionYogi, I made an edit and posted the code. Thanks! –  Boris Jul 15 '09 at 13:37
add comment

2 Answers

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.

 queue: false,
 duration: 500,
 hash: false,
 easing: 'swing',
 onBefore:function( e, anchor, $target ){
  $('.sub').animate({ opacity: 0.2 }, 250);
 onAfter:function( anchor, settings ){
  $(anchor).animate({ opacity: 1 }, 250);

Edit: I posted a demo at this pastebin

share|improve this answer
+1, very nice answer. Not sure if Boris will be back to accept though, it was an old question I cleaned up and Boris hasn't been here for quite some months. 'Tis a good point about fadeOut and widths and messing the scrolling :-) –  Dan F Dec 26 '09 at 6:26
LOL thanks... I didn't even pay attention to the date of this post. I'm not sure how I got to it LOL. –  Mottie Dec 26 '09 at 7:01
@fudgeyAgain exactly what I was looking for and works like a charme. Thanks again. –  markimark Aug 10 '11 at 20:56
add comment

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

share|improve this answer
Thanks Thubkin but I'm not sure that works with the code that I have. –  Boris Jul 15 '09 at 13:38
add comment

Your Answer

