<div>
Okay so what you need to do is store the original element (the mallet) and the current css property. &nbsp;in this example i'm using a color: <a href="http://jsbin.com/fevebinimu/edit?html,css,js,output" rel="ugc">http://jsbin.com/fevebinimu/edit?html,css,js,output</a><br />
<br />

<pre><code class="code-10 nolinks" id="code-20-41865468-1"><span>$(function() {</span>
<span>  $(&quot;#btn&quot;).on('click',function() {</span>
<span>    // remember the current back-color state</span>
<span>    var self = this;</span>
<span>    var back = $(this).css('background-color');</span>
<span>    $(this).css('background-color','yellow');</span>
<span>    setTimeout(function(){(function(el,col) {</span>
<span>      $(el).css('background-color',col);</span>
<span>    }(self,back));},1000);</span>
<span>  });</span>
<span>});</span>
</code></pre>
<br />
I'm using a closure for the setTimout so that you're able to pass variables from the click event scope
</div>


<div>
Now as for the mallet rotating: <a href="http://jsbin.com/ravocuvesa/edit?html,css,js,output" rel="ugc">http://jsbin.com/ravocuvesa/edit?html,css,js,output</a><br />
<br />
You use a CSS transition (for the actual animation) and transform (for the rotation)<br />
<br />

<pre><code class="code-1 nolinks" id="code-20-41865477-1"><span>.image.on {</span>
<span>  transform: rotate(180deg);</span>
<span>}</span>
<span>.image {</span>
<span>  -webkit-transition: transform 1s;</span>
<span>  -moz-transition: transform 1s;</span>
<span>  transition: transform 1s;  </span>
<span>}</span>
</code></pre>
<br />
Then use can use the toggleClass function within the click event of the mallet to toggle the &quot;on&quot; class for the mallet
</div>


<div>
I would like to animate the size, but it does not working<br />
<br />

<pre><code class="code-10 nolinks" id="code-20-41865493-1"><span> //Animate Mallet by changing its size</span>
<span>            var timer = 500;</span>
<span>            var malletWidth = $(&quot;#mallet&quot;).width();</span>
<span>            $(&quot;#mallet&quot;).animate(</span>
<span>               {</span>
<span>                    width: (malletWidth * 2) + &quot;px&quot;</span>
<span>                },timer, </span>
<span>                function()</span>
<span>                    {</span>
<span>                        width: (malletWidth) + &quot;px&quot;</span>
<span>                    } </span>
<span>                        ); //End animate</span>
</code></pre>
<br />
Do I need to nest another animate function within the first animate?
</div>


<div>
is there a reason you want to do it in jQuery vs css?
</div>


<div>
The js in much more intensive to run and can have performance issues
</div>


<div>
But how would you animate the width for example?
</div>


<div>
In your example you clearly call a function twice, but how do you do that?
</div>


<div>
Plus, as I see the assignment's requirements, I need to &nbsp;use step as this is a jQuery course
</div>


<div>
the function isn't called twice, more that the setTimeout call a function that calls another function (closure). &nbsp;This wrapping is done to prevent the closure being executed when the page loads. &nbsp;If the closure was the only thing passed to the setTimeout then it would be called both when the page loads and the result (should it actually return anything, which is doesn't) would be what setTimeout tries to do. &nbsp;Confusing i know but that's the reason for the multiple levels.<br />
<br />
I understand that you need to satisfy the requirements of the course. &nbsp;So step is a must then yeah? &nbsp;I&quot;ll modify my example.
</div>


<div>
Okay here is an example: <a href="http://jsbin.com/negehig/edit?html,js,output" rel="ugc">http://jsbin.com/negehig/edit?html,js,output</a><br />
<br />
I've modified the code from: <a href="http://stackoverflow.com/questions/15191058/css-rotation-cross-browser-with-jquery-animate?answertab=active#tab-top" rel="ugc">http://stackoverflow.com/questions/15191058/css-rotation-cross-browser-with-jquery-animate?answertab=active#tab-top</a><br />
<br />

<pre><code class="code-10 nolinks" id="code-20-41865520-1"><span>$(function() {</span>
<span>  $(&quot;#mallet&quot;).on(&quot;click&quot;,function() {</span>
<span>    AnimateRotate(0,180);</span>
<span>    setTimeout(function() {</span>
<span>      AnimateRotate(180,360);</span>
<span>    },1250);</span>
<span>  });</span>
<span>});</span>
<span></span>
<span>function AnimateRotate(start, angle) {</span>
<span>    // caching the object for performance reasons</span>
<span>    var $elem = $('#mallet');</span>
<span></span>
<span>    // we use a pseudo object for the animation</span>
<span>    // (starts from `0` to `angle`), you can name it as you want</span>
<span>    $({deg: start}).animate({deg: angle}, {</span>
<span>        duration: 250,</span>
<span>        step: function(now) {</span>
<span>            // in the step-callback (that is fired each step of the animation),</span>
<span>            // you can use the `now` paramter which contains the current</span>
<span>            // animation-position (`0` up to `angle`)</span>
<span>            $elem.css({</span>
<span>                transform: 'rotate(' + now + 'deg)'</span>
<span>            });</span>
<span>        }</span>
<span>    });</span>
<span>}</span>
</code></pre>
</div>


<div>
It works, but can you explain<br />
<br />
$({deg: start}).animate({deg: angle}, {<br />
<br />
and why not use .css on both lines?
</div>


<div>
I guess I don't quite understand the step function as well. Why is this needed when without it the animation happens anyway?
</div>


<div>
Does step controls the animation flow, so its not instantaneous?<br />
<br />
If yes, then how does it know now not to exceed 180, especially if we need to animate multiple of properties, like &nbsp;degree and width?
</div>


<div>
The animate function works on any object and its properties... This is essentially saying that you want animate to perform its algorithm (with easing) etc and call the step function for each increment.<br />
<br />
$({deg: start}).animate({deg: angle} <br />
<br />
You pass in a simple object with only the deg property defined. &nbsp;You then tell the animate function that you want to &quot;animate&quot; (or just increment based on the settings you might pass) the deg property to angle. &nbsp;You could rename &quot;deg&quot; to anything you like, it's just a property that you're telling animate to go from and to.<br />
<br />
The animation doesn't work for me without the step function. &nbsp;This is where the actual css is done, like i said before the pseudo object is just to essentially create a glorified &quot;for&quot; loop.<br />
<br />
And in saying that you could just use a loop in conjunction with a setTimout/setInterval, however you would lose the ability to control easing and the duration and it would be very hard to get it right
</div>


<div>
When you say to the animate object that you want to use a particular easing and duration in conjunction with the start and end parameters, it will work out a number of steps to your animation. &nbsp;If you want the width to animate at a different rate to your rotation then you need a different function. &nbsp;In fact you will need a different function for each animation as they will have different start and end points.
</div>


<div>
The issue here is that jQuery animate does not support more complex css properties such as rotation. &nbsp;To get rotation to occur you need to set the &quot;transition: rotate(angle)&quot; css property. &nbsp;Animate will not work with this because of the css rotate function.
</div>


<div>
Do you means something like this<br />

<pre><code class="code-1 nolinks" id="code-20-41865638-1"><span>  $(window).click(function(){</span>
<span>    $('#mallet').css({backgroundColor: 'yellow'})</span>
<span>    setTimeout(function() {</span>
<span>      $('#mallet').css({backgroundColor: 'transparent'})</span>
<span>    }, 3000)</span>
<span>  })</span>
</code></pre>
</div>


<div>
What if I want to animate 2 properties:<br />
<br />
animate by 180deg<br />
increase by 50%
</div>


<div>
<div class="content wysiwyg-content">
Hello Experts,<br />
<br />
I am taking a jQuery classes and need to create a &quot;Wack a Gopher&quot; game. &nbsp;It is almost done, but I dont know how to do the following:<br />
<br />

<blockquote>
The mallet's css should change somehow to give the user a graphic representation that it was clicked, after it is clicked create a timeout event that then changes that css property back
</blockquote>
 <br />
<br />
I have started this at line 66, but I am not quite sure how to handle the changing back property. I also need to swing the mallet 180 degree, which I guess is the same way, maybe I need to use step function, but I am not sure?<br />
<br />
My code so far is <a href="http://codepen.io/AleksPoposki/pen/NRZRZb" rel="ugc">http://codepen.io/AleksPoposki/pen/NRZRZb</a><br />
<br />
Any help will be appreciated.
</div>
</div>


Hello Experts,

I am taking a jQuery classes and need to create a "Wack a Gopher" game.  It is almost done, but I dont know how to do the following:

The mallet's css should change somehow to give the user a graphic representation that it was clicked, after it is clicked create a timeout event that then changes that css property back 

I have started this at line 66, but I am not quite sure how to handle the changing back property. I also need to swing the mallet 180 degree, which I guess is the same way, maybe I need to use step function, but I am not sure?

My code so far is http://codepen.io/AleksPoposki/pen/NRZRZb

Any help will be appreciated.

jQuery Time Off Event

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

jQuery

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.