2

I'm working on making a mobile menu button and I want it to rotate 90 degrees and then disappear but I can't seem to figure out how to get it to work.

I tried using .animate() for the rotation and then a callback that used hide() but that didn't work.

My latest code looks like:

$('.menuButton').click(function() {
  $(this).css('transform', 'rotate(90deg)');
  setTimeout( function() {
    $(this).css('opacity', '0');
  }, 1000);
});//end click
<div class="menuButton"></div>

Thank you in advance.

Desquid
  • 131
  • 2
  • 12

4 Answers4

1

If it is a possibility to use CSS animations then I highly recommend taking advantage of animate.css.

It has a list of pre-made animations that are easy to apply, and you can use jQuery to simply add the class or remove it.

Check out the simple demo below.

(function(){
  'use strict';
  
  $('#run-animation').on('click', runAnimation);
  
  function runAnimation(){
    var target = $('.my-animate-target');
    target.addClass('rotateOut');
    
    setTimeout(function(){
      target.removeClass('rotateOut');
    }, 2000);
  }
  
}());
.container{
  margin:30px;
}
.my-animate-target{
  width:300px;
  padding:20px;
  text-align:center;
  border:1px solid black;
}
#run-animation{
  margin:10px;
  background-color:#fff;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/>
<div class="container"> 
<div class="my-animate-target animated">
  <h1>Watch Me Go!</h1>
</div>
<button type="button" id="run-animation">Run Animation</button>
</div>
Josh
  • 44,706
  • 7
  • 102
  • 124
1

I know that the jQuery methods are attractive, but one of the easiest ways to do this is to put your animation into a CSS class, and then use jQuery to add that class to your element. All of the magic happens within transition. In this case, we tell the element that any changes to transform will take 1 second. Likewise, any changes to opacity will wait 1 second before beginning, and then will take half a second to execute.

.menuButton {
  transition: transform 1s, opacity 500ms 1s;
}
.menuButton.hideMe {
  transform: rotate(90deg);
  opacity: 0;
}

Now, your jquery call will be:

$('.menuButton').click(function() {
  $(this).addClass('hideMe');
});//end click

Try it yourself with the following example: http://jsfiddle.net/dancingplatypus/qgnmk6s3/

Michael Hays
  • 6,878
  • 2
  • 21
  • 17
1

In a simple way you can do this:

$("#image").click(function(){
$(this).rotate(90);
$(this).hide(1000);
});

Try to look at this: http://jsfiddle.net/RwEme/8572/

gaia
  • 93
  • 2
  • 9
0

Because transform doesn't have a strictly numeric value (needs, rotate, scale, etc)...it won't work with the Jquery animate (mostly only works with numeric values) without some work. Please see this other SO question for some suggestions besides Josh's

Community
  • 1
  • 1
t1nr2y
  • 656
  • 6
  • 20