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

时间:2013-02-02 11:26:01

标签: jquery fadein fadeout

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

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

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

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

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

谢谢!

2 个答案:

答案 0 :(得分:0)

你的css

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

将左侧设为0

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

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

答案 1 :(得分:0)

您必须将左: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();
  }

 });