Reversing the jquery effect

Question

I am learning Jquery. And I made the following code

$(document).ready(function(){           
    $('html').click(function(){             
        $('.box').css("background-color", "#666");
        $('.box').animate({"width":"400px"}, 1000);             
    });             
});

In this code when clicking any of the html is performed the effect runs!

Only that type, if I click once the effect runs! How to do so so that I click again the effect if "revert"??

Answer 1

You have two ways of doing what you want:

1st method

There is a command in jQuery called toggleClass, You can use it to get what you want by alternating the object class. Imagine a blue div, and you want it to turn yellow. Make it blue and then create a class to make it yellow. So by clicking anywhere, jQuery adds the new class to the object, and when you click again, it removes. Example:

$("#bloco").click(function() { 
  $(this).toggleClass("outraClasse");
});

Fiddle: http://jsfiddle.net/1ktu8xob/

Remembering that it is important to place the property transition in the element, so you can control the time of the transition animations.

2nd method

You can use this Javascript code to create a variation function between clicks:

(function($) {
$.fn.clickToggle = function(func1, func2) {
    var funcs = [func1, func2];
    this.data('toggleclicked', 0);
    this.click(function() {
        var data = $(this).data();
        var tc = data.toggleclicked;
        $.proxy(funcs[tc], this)();
        data.toggleclicked = (tc + 1) % 2;
    });
    return this;
};
}(jQuery));

So your code would look like this:

$('#bloco').clickToggle(function(){             
    $(this).css("background-color", "#666");
    $(this).animate({"width":"400px"}, 1000);             
}, function() {
    $(this).css("background-color", "blue");
    $(this).animate({"width":"50px"}, 1000);    
});

Fiddle: http://jsfiddle.net/shw51knq/

---

Reference

Code for the 2nd method taken from that answer: https://stackoverflow.com/a/4911660/3126013