### jQuery - Effects

In the previous lessons we learned that jQuery has a few methods to apply effects with very little code. The hide() method is one example.

To customize the effects we can pass two arguments when calling the methods: the speed and a callback function.

##### Speed and callback function of effects

When calling the hide() method, for example, we can define the speed and something to be executed when the effect is finished, which is the callback function. The speed is informed in milliseconds.

            $("element").hide(speed, callback function);

To understand how the callback function works, let's hide the button below in a time of 2 seconds (or 2000 milliseconds). After the effect is completed, let's show the text that has an Id of "hidden-text".

#### The button is now hidden

        $( "#hide-button" ).click(function() {
            $(this).hide(2000, function(){
                $("#hidden-text").show();
            });

        });

Note that the text only appears after the hide effect finishes, this is because we used the callback function. Let's try to use it out of the callback function and see what happens:

        $( "#hide-button" ).click(function() {
            $(this).hide(2000);
            $("#hidden-text").show();

        });

This happens because Javascript is an asynchronous language, which means that many operations can be performed at the same time. So in our example, the show() method doesn't have to be wait for the hide() method to finish, unless we intend to.

#### hide(), show() and toggle()

Besides the hide() and show() methods, there's also the toggle() method that can be very useful.

Tab title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut congue metus mi, a sodales elit blandit in. Pellentesque mattis sem vitae diam aliquet gravida. Nulla eu elit non lorem faucibus egestas vitae ac tortor.

        $("#toggle-tab").click(function() {

            $("#tab-content").toggle();
            $("#toggle-tab").toggleClass("flip");

        });

In the above example we used the toggle() method to hide and show the text content. We can also use it with classes, like we did with the toggleClass. This way we add and remove classes and with it we can create nice effects, like rotating the arrow next to the tab title.

Performing the above operation in pure Javascript would demand many lines of code and logic.

#### slideUp(), slideDown() and slideToggle()

Another ineresting effect is sliding elements up and down when hiding/showing them.

        $("#toggle-tab").click(function() {

            $("#tab-content").slideToggle(500);
            $("#toggle-tab").toggleClass("flip");

        });

#### fadeIn(), fadeOut(), fadeToggle() e fadeTo()

Another option is to use the fade methods, that first change the opacity of the elements, then their display property.

        $("#toggle-tab").click(function() {

            $("#tab-content").fadeToggle();
            $("#toggle-tab").toggleClass("flip");

        });

The fadeTo() is used to set a specific opacity to the element. In this case there's no change to the display property. This method needs to arguments, the time and the opacity.

        $("#example").fadeTo(200, 0.15);

* The speed in jQuery can also be set with the keywords "slow" and "fast", that represent 600ms and 200ms respectively. When no speed is informed, by using empty parenthesis, jQuery uses the default value of 400ms.

### Contents