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

使用jQuery和localScroll滑出并淡出效果

2 个答案: