onclick with javascript and animate.css

本文关键字：animate css and javascript with onclick 更新时间：2023-09-26

我不明白为什么这不起作用。

我在div 类标题上做了一个动画（fadeInDownBig）;我想要的是当我点击一个链接（一个href）时，我的标题确实淡出OutUpBig。

<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>

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

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

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

法典：

$(function() {
  $("a").click(function() {
    $("#header").addClass('animated fadeOutUpBig');
    return false;
  });
});