Question

我有一个简单的问题，我不知道如何处理它，因为我正在学习JavaScript

我想要做的是在CSS上使用淡入/淡出过渡到锚点的链接导航。为此，我必须使用JavaScript获取当前页面ID和锚点href并触发CSS效果。

这是我到目前为止所得到的：

$('.btn').click(function(e) { 
  e.preventDefault();
  var next = $(this).attr('href');
  $(this).parent().addClass('fadeout', function() {
      setTimeout(function() {
          $(this).parent().css('display', 'none');
        }, 1000);
    $('#' + next).css('display', 'block');
    $('#' + next).addClass('fadein');
    });
});

.fadeout {
    opacity: 0;
    transition: all 1000ms ease;
}

.fadein {
    opacity: 1;
    transition: all 1000ms ease;
}

#page2,
#page3 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="page1">
  Page 1 Content
  <br>
  <a href="page2" class="btn">Show Page 2 and hide this page</a>
  <br>
  <a href="page3" class="btn">Show Page 3 and hide this page</a>
</div>

<div id="page2">
  Page 2 Content
  <br>
  <a href="page1" class="btn">Show Page 1 and hide this page</a>
  <br>
  <a href="page3" class="btn">Show Page 3 and hide this page</a>
</div>

<div id="page3">
  Page 3 Content
  <br>
  <a href="page1" class="btn">Show Page 1 and hide this page</a>
  <br>
  <a href="page2" class="btn">Show Page 2 and hide this page</a>
</div>

提前感谢您帮助我学习

Answer 1

您的代码存在一些问题：

addClass方法只需要1个参数，因此永远不会调用第二个参数（函数）。
超时回调中的this不是您认为的那样。 this表现得有些奇怪，而且很难掌握，特别是当你刚刚开始使用javascript时。我不会在这里解释它（很多信息），但在这种情况下我会将值缓存在超时函数之外的变量中。
您正在添加关于淡出的类，但是当您淡入时，您永远不会再删除它们。我会确保在您的HTML中，所有可见的“页面”都有一个类fadein而隐形的类是一个类fadeout。这样你就可以切换两者来切换状态。
jQuery提供show()和hide()方法，因此我会使用这些方法而不是自己修改display值。
jQuery实际上也提供了fadeIn和fadeOut方法，这可能更适合这里，但为了你的“练习”，让我们坚持你的css动画。
如果你使用jQuery选择器多一次，那么把它放在变量中是明智的。这样，DOM解析只需要完成一次。随着您的DOM变得越来越复杂，这实际上是非常昂贵的操作。

所以说，你的javascript看起来像这样：

$('.btn').click(function(e) {
  e.preventDefault();
  var $target = $(this);
  var $next = $('#' + $(this).attr('href'));
  $target.parent().toggleClass('fadeout fadein');
  setTimeout(function() {
    $target.parent().hide();
    $next.show();
    $next.toggleClass('fadein fadeout');
  }, 1000);
});

查看实际操作中的代码：https://jsfiddle.net/rr7a7sL4/

触发CSS过渡到JavaScript上的锚点

1 个答案: