You are here

Bounce effect in Jquery when hover the image or menus

A short tutorial on how to create a bounce effect in jquery when you hover the menu items or when you hover over any element. You need to have jquery and jquery ui library to make this effect working. You can include the jquery files from the google as it save the page load speed.

Inclide the below two lines in your header file if you have not added.

 

The actuall script that creates the bounce effect which will be going in the head section of the html. The javascript code will be going under your document.ready function. If you already have document.ready function than add the following hover effect function.

I have created a demo file which you can download and modify it.

A short tutorial on how to create a bounce effect in jquery when you hover the menu items or when you hover over any element. You need to have jquery and jquery ui library to make this effect working. You can include the jquery files from the google as it save the page load speed.

Inclide the below two lines in your header file if you have not added.

 

The actuall script that creates the bounce effect which will be going in the head section of the html. The javascript code will be going under your document.ready function. If you already have document.ready function than add the following hover effect function.

I have created a demo file which you can download and modify it.


$("a.link").hover(function(){
if ($(this).data("bouncing") == false || $(this).data("bouncing") == undefined){
$(this).effect("bounce", { direction: 'up', distance: 10, times: 1 });
$(this).data("bouncing", true);
}
},function () {
$(this).data("bouncing", false);
});
});
// ]]]]>
//-->

I have created a demo file which you can download and modify it.

Tags: 

Website fix request form

If you have problems with the website based on Drupal or WordPress, please feel free to contact us: