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>
Browser View
jQuery Shake....
<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>
Browser View
jQuery Shake....
<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>
Related Topics