使用 jQuery 和 localScroll 的滑出和淡入淡出效果答案

【问题标题】：Slide out and fade effect using jQuery and localScroll使用 jQuery 和 localScroll 的滑出和淡入淡出效果
【发布时间】：2009-07-14 15:35:50
【问题描述】：

我正在使用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);


  });

【问题讨论】：

SolutionYogi，我进行了编辑并发布了代码。谢谢！

标签： javascript jquery jquery-plugins

【解决方案1】：

您不能使用fadeOut，因为它将div 样式设置为display:none，因此div 的高度和宽度为零，这使得scrollTo 插件非常糟糕。我建议使用不透明度。在下面的代码中，我将最小不透明度设置为 0.2，因为当我将其设置为零时，很难判断内容是否在滚动。

我使用了 LocalScroll Demo 并进行了这些修改 - 它似乎工作得很好。我没有尝试匹配您的代码，因为我知道下面的代码适用于演示，并且您的问题标题为 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发布了一个演示

【讨论】：

+1，非常好的答案。不确定鲍里斯是否会回来接受，这是我清理的一个老问题，鲍里斯已经好几个月没来了。 '这是一个关于淡出和宽度以及弄乱滚动的好点:-)
LOL 谢谢...我什至没有注意这篇文章的日期。我不知道我是怎么做到的，哈哈。
@fudgeyAgain 正是我一直在寻找的东西，并且像魅力一样工作。再次感谢。

【解决方案2】：

见：http://docs.jquery.com/Effects/queue

【讨论】：

感谢 Thubkin，但我不确定它是否适用于我拥有的代码。