asked on

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

Rob

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.

Refael

ASKER

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

Rob

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.

Refael

ASKER

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.

Rob

Of course. I'll look into it for you.

Rob

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

Refael

ASKER

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

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Refael

ASKER

Not sure that's the best solution.

Rob

How come? What's missing?