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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RefaelAuthor Commented:
Not sure that's the best solution.
0
RobOwner (Aidellio)Commented:
How come? What's missing?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.