onclick 与 javascript 和 animate.css

Question

我不明白为什么这行不通。

我在 div class header 上做了一个动画 (fadeInDownBig)；我想要的是，当我单击 link（href）时，我的 header 会 fadeOutUpBig.

<script>
               $(function(){
     $("a").click(function(){
      $("#header1").addClass('animated fadeOutUpBig');
     }); 
    });
                        </script>

.header{
 margin-left:10px;
 height:350px;
 Background:url(../img/background_header2.jpg);
 background-repeat:no-repeat;
 
}

<div class="header animated fadeInDownBig" id="header1" >
      <div class="menu">
       <a class="wow animated fadeIn hvr-grow-shadow transition" data-wow-delay="0.5s" href="../index.html" >Home </a>

我做错了什么？（不包括animate.css）

Answer 1

就像上面提到的点击锚点的评论会在动画发生之前重定向你。使用 javascript，您可以通过在末尾添加 return false 或 preventDefault 使其在点击时完全不执行默认操作。

我用上面的代码做了一个Example。

代码：

$(function() {
  $("a").click(function() {

    $("#header").addClass('animated fadeOutUpBig');
    return false;
  });
});

onclick 与 javascript 和 animate.css

onclick with javascript and animate.css

javascript

jquery

css

onclick

animate.css