Javascript 使用jQuery和localScroll的滑出和淡出效果

我正在使用创建内容滑块。问题是我想给我滑出的div一个淡入淡出的效果，让它在消失之前淡入淡出。 有人知道我该怎么做吗？我前后都试过一些东西，但没有达到我的预期

谢谢

乐：以下是我使用的代码：

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


  });

---

请参阅：

请参阅：

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

我使用了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);
 }
});

---

编辑：我在这里发布了一个演示

你不能使用

淡出

，因为它将div样式设置为

display:none

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

我使用了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);
 }
});

---

编辑：我在这个

SolutionYogi发布了一个演示，我进行了编辑并发布了代码。谢谢解决方案Yogi，我编辑并发布了代码。谢谢谢谢Thubkin，但我不确定这是否适用于我拥有的代码。谢谢Thubkin，但我不确定这是否适用于我拥有的代码。+1，非常好的答案。不过，我不确定鲍里斯是否会回来接受，这是我澄清的一个老问题，鲍里斯已经好几个月没来了这是一个关于淡出和宽度和混乱滚动的好观点：-）哈哈，谢谢。。。我甚至没有注意到这篇文章的日期。我不知道我是怎么做到的，哈哈。@fudgeyAgain正是我所寻找的，就像一个魔术师。再次感谢。+1，回答得很好。不过，我不确定鲍里斯是否会回来接受，这是我澄清的一个老问题，鲍里斯已经好几个月没来了这是一个关于淡出和宽度和混乱滚动的好观点：-）哈哈，谢谢。。。我甚至没有注意到这篇文章的日期。我不知道我是怎么做到的，哈哈。@fudgeyAgain正是我所寻找的，就像一个魔术师。再次感谢。