0

我最近开始学习 jQuery。我正在尝试为我的网站编写一个淡入淡出内容的脚本，因为我在网上的任何地方都找不到它。

有我的脚本：http: //jsfiddle.net/hf9xJ/3/

我的问题是脚本只有在单击每个链接至少一次（在一个会话中）后才能正常工作。之后，fadeOut() 和 fadeIn() 可以正常工作。

当我试图删除时： animate({ "left": "0%" }, 500, 'linear', 整个脚本突然停止工作。

有谁知道如何解决这个问题，甚至有更好的想法以更好的方式编写整个脚本？

谢谢！

4

2 回答 2

0

您必须将left:100%从#content section:nth-child(1)替换为left:0%并添加此 css

#content .active{
  z-index: 100;
}

把js改成这个

  $("#content section").css("visibility", "hidden")
      .each(function(index, element) {
          elem=$(element);
          if (!(elem.hasClass("active"))) {
              elem.fadeOut();
          }
  });

  $("#content .active").css("visibility", "visible").fadeIn();

  $('a').on('click', function (event) {
  //event.preventDefault();

      var  sectionId = $(this).attr("data-section"),
            $toSlide = $("#content section#" + sectionId),
          $fromSlide = $('.active');

  if (!($toSlide.hasClass("active"))) {
      $fromSlide.fadeOut().css("visibility", "hidden").removeClass("active");
      $toSlide.addClass("active").css("visibility", "visible").fadeIn();
  }

 });
于 2013-02-02T11:46:42.500 回答
0

你的 CSS

#content section {
position: absolute;
left:100%;
}

设置为 0

并将它们设置为display:none（我猜第一个在加载时可见的除外））

注意：第一次点击时淡出正在工作，但同时从左：100％到左：0的动画正在运行；在左侧动画从左侧 0 动画到左侧 0 之后，因此没有任何可见的事情发生，您只看到淡入淡出动画，事实上，如果您只想要淡入淡出效果，为什么需要动画左侧动画？

于 2013-02-02T11:33:09.953 回答