触发CSS转换到JavaScript上的锚定

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

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

到目前为止，我得到的是：

$（'.btn'）。单击（函数（e）{
e、 预防默认值（）；
var next=$（this.attr（'href'）；
$（this.parent（）.addClass（'fadeout'，function（））{
setTimeout（函数（）{
$（this.parent（）.css（'display'，'none'）；
}, 1000);
$（'#'+next）.css（'display'，'block'）；
$（'#'+next）.addClass（'fadein'）；
});
});
.fadeout{
不透明度：0；
过渡：所有1000毫秒都容易；
}
法丹先生{
不透明度：1；
过渡：所有1000毫秒都容易；
}
#第2页，
#第3页{
显示：无；
}

第1页内容




第2页内容




第3页内容




您的代码有一些问题：


addClass
方法只需要一个参数，因此第二个参数（函数）永远不会被调用
超时回调中的
此
不是您认为的那样
这个
的行为有些奇怪，可能很难理解，尤其是当您刚刚开始使用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);
});

请看一看正在运行的代码：
您的代码有一些问题：


addClass
方法只需要一个参数，因此第二个参数（函数）永远不会被调用
超时回调中的
此
不是您认为的那样
这个
的行为有些奇怪，可能很难理解，尤其是当您刚刚开始使用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);
});

请看一下运行中的代码：
您能解释一下您的问题是什么吗@ErmacSee代码段中的错误，我可以淡出我的内容，但我无法加载新内容：（你能解释一下你的问题吗？@ErmacSee代码段中的错误，我可以淡出我的内容，但我无法加载新内容：（非常感谢你的回答，我从这个=）非常感谢您的回答，我从中学到了很多=）