jQuery Shake Effect

jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library , that you can use to build highly interactive web applications. To take advantage of the latest new features, all of the UI plugins have been refactored. Additionally, hundreds of miscellaneous bugs were fixed.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

How Shake Effect works?

Syntax
selector.effect( "shake", {arguments}, speed );
Shakes the element multiple times, vertically or horizontally . A value of "left" "right" will shake the element horizontally, and a value of "up" or "down" will shake the element vertically. The value specifies which direction the element should move along the axis for the first step of the effect.

How to shake a div horizondally using JQuery?

$(".target").effect( "shake", { direction: "left", times: 4, distance: 101}, 2000 );
<div class = "target" style="height:150;width:200;background:blue;position:absolute;"> jQuery Shake.... </div>
run this source code Browser View


jQuery Shake....

Full Source
<html> <head> <title>jQuery Shake horizondally</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#btnStart").click(function(){ $(".target").effect( "shake", { direction: "right", times: 4, distance: 101}, 2000 ); }); }); </script> </head> <body> <button id="btnStart">Shake Box... </button> <div class = "target" style="height:150;width:200;background:blue;position:absolute;"> jQuery Shake.... </div> </body> </html>

How to shake a div vertically using JQuery?

$(".target").effect( "shake", { direction: "up", times: 4, distance: 101}, 2000 );
<div class = "target" style="height:150;width:200;background:blue;position:absolute;"> jQuery Shake.... </div>
run this source code Browser View




jQuery Shake....

Full Source
<html> <head> <title>jQuery Shake virtically</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#btnStart").click(function(){ $(".target").effect( "shake", { direction: "up", times: 4, distance: 101}, 2000 ); }); }); </script> </head> <body> <button id="btnStart">Virtical Shake... </button> <div class = "target" style="height:150;width:200;background:blue;position:absolute;"> jQuery Shake.... </div> </body> </html>