jQuery and CSS.animate

Hello Experts,

I am using the animate.css from animate.css
I am using it on a menu that should toggle (show and hide).
I am trying to work with jQuery with the animate.css in the way you see below yet it does not work so well.

In basic. This is a "Hamburger" menu for mobile website. On click : When not visible -> show it .... AND when visible ->  hide it.

The #menu is set to display:none that's why i am using the class block to show it.

$(".header-burger").click(function(event) {
		event.preventDefault();
		
		if ($('#menu').is(":visible")) {
    		   $('#menu').toggleClass("fadeInDown fadeOutUp").hide();
		} else {
                  $('.header-info-menu').addClass("animated fadeInDown block");
	      }		
});

Open in new window

RefaelAsked:
Who is Participating?
 
RobOwner (Aidellio)Commented:
Ok I've slept on it and I think this is what you're after right: http://jsbin.com/cenuqe/4/edit?js,output

$(function() {
  $(".header-burger").click(function(event) {
    $("#menu").show();
    $("#menu").toggleClass('fadeInDown').toggleClass("fadeOutUp");
  });

  $('#menu').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    if ($("#menu").hasClass("fadeOutUp")) {
      $("#menu").hide();
    }
  });
});

Open in new window

0
 
RobOwner (Aidellio)Commented:
Is this what you need: http://jsbin.com/gudayo/1/edit?js,output

If that's the case you don't need the animate plugin you've used as it uses jQuery's internal animate.
0
 
RefaelAuthor Commented:
Hello Rob Jurd, thank you...

I know the jQuery toggle and the slide yet here i am trying to combine the animate.css to achieve a better animation styles (css3).
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
RobOwner (Aidellio)Commented:
This is without using the class: http://jsbin.com/gudayo/2/edit?html,css,js,output

Just trying to get it to work without having to include libraries unnecessarily.
0
 
RefaelAuthor Commented:
Hi Rob Jurd

Rob doing I know how to do this using plain CSS and jquery yet and again i want to be able to use the animate.css that's the aim here. I hope you understand.
0
 
RobOwner (Aidellio)Commented:
Of course. I'll look into it for you.
0
 
RobOwner (Aidellio)Commented:
this is using the animate.css class: http://jsbin.com/cenuqe/3/edit?html,js

$(function() {
  $(".header-burger").click(function(event) {
    $("#menu").toggle();
  });
});

Open in new window


<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <button class="header-burger">Toggle Header</button>
  <div id="menu" class="animated fadeInDown">
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
    </ul>
  </div>
  <div>More Content on the page</div>
</body>
</html>

Open in new window


demo: http://jsbin.com/cenuqe/3
0
 
RefaelAuthor Commented:
Hi Rob, thanks again.
I am trying to understand what you are doing and if you understand what i am trying to do.
you set the "animated fadeInDown" on initial (page load) then where are you "toggle" between animations e.g. animated fadeOutUp"?
0
 
RefaelAuthor Commented:
Not sure that's the best solution.
0
 
RobOwner (Aidellio)Commented:
How come? What's missing?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.