使用fadeOut() 和fadeIn() 淡化内容答案

【问题标题】：Fading content with fadeOut() and fadeIn()使用fadeOut() 和fadeIn() 淡化内容
【发布时间】：2025-11-30 07:40:01
【问题描述】：

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

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

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

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

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

谢谢！

【问题讨论】：

您能解释一下您要达到的目标吗？我点击了链接，它工作正常。你想要自动淡入和淡出吗？
请改进您的标题，使其描述问题，而不仅仅是命名一些函数。

标签： jquery fadein fadeout

【解决方案1】：

你的 CSS

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

设置为 0

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

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

【讨论】：

【解决方案2】：

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

#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();
  }

 });

【讨论】：