javascript - onclick 与 javascript 和 animate.css

Question

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

我在我的 div 类标题上做了一个动画 (fadeInDownBig)；我想要的是，当我点击一个链接 (a href) 时，我的标题确实 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

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

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

代码:

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

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