Jquery UI vibration effect implementation principle and steps_jquery

If you want to attract readers' attention to certain parts of your blog page, you can make these parts vibrate, such as ads. Today's article will introduce how to make elements in your page vibrate.

To achieve this purpose we need to use Jquery and Jquery UI.
First, let me create a shake block, which can be a picture or an ordinary dom element, such as div, span, etc., and name the element's id as shake. You can name it arbitrarily.

We use pictures as follows:

Copy code The code is as follows:

< ;img src="http://jqueryui.com/jquery-wp-content/themes/jquery/images/logo-jquery-ui.png" id="shake"/>

Jquery UI does not have a ready-made method to vibrate elements. We need to use the effect method to achieve it. The syntax is as follows:

Copy code Code As follows:

effect('shake', options, speed);

Parameter options (there are three parameters here):
·times: Specify the number of times the element shakes
•distance: Specify the vibration amplitude of the element
•Direction: Specify the vibration direction of the element
The following is the specific implementation method, set the vibration 3 times, and call the vibration every 500ms:

Copy code The code is as follows:

function interval() {
$('#shake').effect('shake', { times:3 }, 100);
}
$(document).ready(function() {
var shake = setInterval(interval, 500);
});

Here I imported the latest version.
The complete code is attached below

Copy the code The code is as follows:

<script> <BR>function interval() { <BR>$('#shake').effect('shake', { times:3 }, 100); <BR>} <BR>$(document ).ready(function() { <BR>var shake = setInterval(interval, 500); <BR>}); <BR></script>

jQuery Shake Effect

html>