jQuery Shake Effect

jQuery UI serves as a widget and interaction library that extends the capabilities of the underlying jQuery JavaScript Library. This resource empowers developers to construct dynamic and engaging web applications with a wide range of interactive elements. To embrace cutting-edge features, the UI plugins have been restructured, ensuring compatibility with the latest advancements. Moreover, this update addresses numerous bugs, promoting a more stable and refined development environment for crafting sophisticated web interfaces.

<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 );

The shaking effect in jQuery UI is a dynamic animation that imparts multiple oscillations to an element, either in a vertical or horizontal direction. By using values like "left" or "right," the shaking occurs horizontally, while "up" or "down" values induce vertical shaking. This value determines the initial direction along the specified axis for the first movement step of the effect, resulting in an animated element that vibrates in the desired orientation.

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>

Conclusion

The jQuery UI Shake effect introduces dynamic motion to HTML elements, creating a visually engaging shaking animation. By specifying parameters like direction, number of shakes, and distance, developers can customize the shaking behavior to suit their design. This effect adds an interactive and dynamic touch to web interfaces, enhancing user experience and visual appeal.






Related Topics
  1. Show and Hide Effect in jQuery
  2. Fade effect in jquery
  3. Sliding Effect in jquery
  4. jQuery Effect animate() Method
  1. jQuery queue(), dequeue() and clearQueue()
  2. jQuery Stop() finish()
  3. jQuery Callback Function