Ad

Onclick With Javascript And Animate.css

I don't get it why this won't work.

I did an animation on my div class header (fadeInDownBig); What I want is when I click on a link (a href) is that my header does 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" target="_blank" rel="nofollow noreferrer" href="../index.html" >Home </a>

What am I doing wrong ? (does not include animate.css)

Ad

Answer

Like the comment above mentioned clicking on an anchor will redirect you before the animations can take place. With javascript you can make it not do its default action at all on click by adding return false or preventDefault at the end.

I've made an Example with the above code.

Code:

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

    $("#header").addClass('animated fadeOutUpBig');
    return false;
  });
});
Ad
source: stackoverflow.com
Ad