Question

我最近开始学习jQuery。我正在尝试为我的网站编写一个淡入淡出和淡出内容的脚本，因为我无法在网上找到它。

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

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

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

谢谢！

Answer 1

你的css

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

将左侧设为0

＆安培;将它们设置为display:none（除了第一个在负载上可见的我猜））

注意：fadeout正在进行第一次点击，但同时左边的动画：100％到左：0正在运行;动画左边是动画从左0到左0所以没有任何可见的发生，你只看到fadein动画＆amp;事实上，如果你只想要一个淡化效果，你为什么还需要动画左动画呢？

Answer 2

您必须将左：100％从 #content部分：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();
  }

 });

使用fadeOut（）和fadeIn（）淡化内容

2 个答案: