CODEWITHSUNDEEP
javascriptjquerycssonclickanimate.css
user3700778
user3700778

Reputation: 13

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" href="../index.html" >Home </a>

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

Upvotes: 1

Views: 3445

Answers (1)

Antonio Smoljan
Antonio Smoljan

Reputation: 2207

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;
  });
});

Upvotes: 1

Related Questions