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