jQuery Tutorial #01 Mouse Events (Click , dblClick, mouseEnter, mouseLeave, mouseOver and Hover)

Image Source

Repository  

 https://github.com/jquery/jquery 

What Will I Learn?   

I will learn in this tutorial the jquery events in particular the mouse events.

• The click and double click events.
• The mouseenter and mouseleave events.
• The mouseover event.
• The hover event.

Requirements   

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

Difficulty       

• Basic

Description   

 In this tutorial we will learn the jQuery events , the jQuery has 4 types of events we will take the first type ( Mouse Events ) .

- I created a table to organize the explanation and to clarify the points more, in the table I have 4 columns , each one contains an event 

1- Click Event : 

We can customize what will happen when we click on an element button for example or link or something else by the ' click event ' .

Before anything you must select the element by the $('element') selector , after that we apply the .click() event .

We pass a function as parameter for this method $('element').click(function () { // something here }));

And when you click on the element , the system will execute the //something here , it will execute the content of the function.

In the function you can do anything you need for the example that I explained I have show a list when I click on the button , and this is a benefit of clicking benefits.

My code : 

/******* click event **********/

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

        $('.listTest1').animate({

            height: '80px'

        }, 600);

        $('.listTest1').css('visibility', 'visible');

    });

2- Double Click Event : 

The system will execute the content of the function just when we double the click on the element and for that we need the dblclick() event .

$('element').dblclick(function () { //something here});

For the example that I mentioned when I double the click on the button, the list will appear , there is many examples to use the double click, let's just know that it's very important and very usable.

My code : 

/******* double click event **********/

    $('.btnDblClick').dblclick(function () {

        $('.listTest2').animate({

            height: '80px'

        }, 600);

        $('.listTest2').css('visibility', 'visible');

    });

The result when we click on the first button and when we double the click on the second button : 

3- MouseEnter Event : 

This event is very important, we need it a lot in the sliders , images and portfolios ..etc , when we pass the mouse on the image the informations about the image will appear and it's a good effect .

You should firstly select the element $('element') then you need to use the event mouseenter() with the function as parameter $('element').mouseeneter(function () { //something here });

My code :

   /**** MouseEnter event ****/

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

        $('.overley1').fadeIn(600);

    });

The result :

4- MouseLeave Event : 

This event is the contrary of the previous event , when we pass the mouse on the element the system will execute the mouseenter event and when we leave from the element the system will execute the mouseleave event.

$('element').mouseleave(function () { //something here});

We select the element firstly then we apply the event to disappear an element for example .

My code

/**** MouseLeave event ****/

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

        $('.overley1').fadeOut(600);

    });

5- MouseOver Event : 

This event is the same with the mouseenter event , when you enter the mouse on the element something will be applied.

$('element').mouseover(function () { //something here});

This is my code : 

/******* MouseOver event **********/

    $('.tdImg2').mouseover(function () {

        $('.overley2').fadeIn(600);

    });

6- Hover Event : 

The hover event combine between the mouseenter and mouseleave events , it has two functions 

$('element').hover(function () { //first function}, function () { //second function });

 The first function equals to the mouseenter event and the second function equals to the mouseleave event.

My code : 

 /**** Hover ****/

    $('.tdImg1').hover(function () {

        $('.overley1').fadeIn(600);

    }, function () {

        $('.overley1').fadeOut(600);

    });

Video Tutorial  

Curriculum   

• Create a slideshow using HTML5 , CSS3 and jQuery

Proof of Work Done   

https://github.com/alexendre-maxim/jQuery-Events