jQuery Tutorial #04 Effects Part 01 ( Show, Hide, Toggle, FadeIn, FadeOut and FadeToggle)

Image Source

Repository

https://github.com/jquery/jquery 

What Will I Learn?

I will learn the jQuery effects part 01 the show, hide, toggle, fadeIn, fadeout and fadetoggle effects with examples.

• What's the Show/Hide effects and how to use them.
• The definition of FadeIn/FadeOut effects and their uses.
• Combine between Show/Hide by Toggle Effect.
• Combine between FadeIn/FadeOut by FadeToggle Effect.

Requirements

• Knowledge about HTML5 and CSS3
• Knowledge about jQuery
• A text editor like notpad ++ 

Difficulty

• Basic

Description

In this tutorial we will take the jquery effects part 1 , in this part we will take the Show, Hide, Toggle, FadeIn, FadeOut and FadeToggle effects with examples . 

1-Show Effect :

Is a method sets the display proprieties of elements to whatever they initially were they block, inline, or inline-block before the inline style display: none was applied to them.

To use the show effect we must select the element then apply the show() method

$('element').show(speed, function () { // something here });

In this example when the user clicks on ' Advanced Search ' button, the system will display the advanced search div by using ' show ' effect.

2-Hide Effect :

The hide() method simply change the inline style display: none for the selected elements.

To use the hide effect we must select the element then apply the hide() method  

$('element').hide(speed, function () { // something here });

In the same example if the user wants to return to the default search or the simple search, he will click on the button ' Simple Search ' and the system will hide the advanced search and show the simple search.

My code : 

/***** Show and Hide Effects *****/

    $('.advancedSearch').click(function () {

        $(this).toggleClass('activeButton');

        if ($(this).hasClass('activeButton')) {

            $('.searchAdv').show(1000);

            $(this).html('Simple Search')

            $('.inputSearchA').hide(1000);

        } else {

            $('.searchAdv').hide(1000);

            $(this).html('Advanced Search');

            $('.inputSearchA').show(1000);

        }

    });

The show method will set the display propriety to ' block , inline or inline-block ' depend on the default propriety , the hide method will set the display propriety to ' none ' to hide the element.

3- Toggle Effect :

The toggle() method show or hide the elements, if the element is initially displayed, it will be hidden; if hidden, it will be displayed.

To use the toggle effect we must select the element then apply the toggle() method  $('element').toggle(speed, function () { // something here });

I will use the same example by toggle effect, I will display and hide the advanced search div with the click event.

My Code :

/****** Toggle Effect ******/

    $('.advancedSearch').click(function () {

        $('.searchAdv').toggle(1000);

        $('.inputSearchA').toggle(1000);

        if ($('.searchAdv').css('display') === 'block') {

            $('.advancedSearch').html('Simple Search');

        } else {

            $('.advancedSearch').html('Advanced Search');

        }

    });

The first input with class ' inputSearchA ' has the display inline propriety, by the toggle effect it will be hidden , the display propriety will be ' hide ' .

The advanced search is hidden, by the toggle effect it will be shown , the display propriety will be ' block '.

4- FadeIn Effect :  

The fadeIn function of the Jquery framework makes it possible to display an element or set of html elements that are invisible to the user. It will give a progression effect by modifying the opacity when displaying this element.

To use the fadeIn effect we must select the element then apply the fadeIn() method  $('element').fadeIn(speed, function () { // something here });

I will show a list of items when I pass the mouse on the service item using the mouseenter event, this effect will change the opacity of element from 0 to 1 to become more smooth.

My code:

$('.service').mouseenter(function () {

        $('.secondList').fadeIn(1000);

        $(this).addClass('active');

 });

When I pass the mouse on the service item , I will show the second list by fadeIn effect and add the active class or the green background to the service item and this is the result 

5- FadeOut Effect :

The fadeOut function of the Jquery framework makes it possible to remove an element or a set of html elements by making them invisible to the user. It will give a progression effect by modifying the opacity at the disappearance of this element.

To use the fadeOut effect we must select the element then apply the fadeOut() method  $('element').fadeOut(speed, function () { // something here });

When I leave from the service item the system will hide the second list using the fadeOut method.

My Code :

$('.service').mouseleave(function () {

        $('.secondList').fadeOut(10000);

        $(this).removeClass('active');

});

The fadeout method will change the opacity of the second list from 1 to 0 to be hidden, I also removed the active class from the element to be with the transparent background and this is the result 

6- FadeToggle Effect :

The jQuery fadeToggle() method display or hide the selected elements by animating their opacity in such a way that if the element is initially displayed, it will be fade out; if hidden, it will be fade in.

To use the fadeToggle effect we must select the element then apply the fadeToggle() method  $('element').fadeToggle(speed, function () { // something here });

I will use the same example but with the click event , when I click on the button the system will test if the value of display propriety is ' none ' it will fadeIn the element else it will fadeOut it will change the opacity from 0 to 1 and from 1 to 0.

My Code :

$('.service').click(function () {

        $('.secondList').fadeToggle(10000, function () {

            console.log('toggle');

        });

    });

You can do something when the operation finished and this is the callback function.

Video Tutorial 

Curriculum

• Create a slideshow using HTML5 , CSS3 and jQuery
•  jQuery Tutorial #01 Mouse Events (Click , dblClick, mouseEnter, mouseLeave, mouseOver and Hover)
• Create a loading page using HTML5 , CSS3 and jQuery
• jQuery Tutorial #02 Keyboard and Form Events ( Keyup, Keydown, Keypress, Change, Focus and Blur)
•  jQuery Tutorial #03 Form and Document/Window Events (Submit, Scroll and Resize)

Proof of Work Done

https://github.com/alexendre-maxim/jQuery-tutorial/tree/master/jQuery%20tutorial%20%2304%20Effects%20part%201