How to Shake an element using jQuery UI

Whether you are a beginner or not to the WordPress, you have seen the shake effect when you go for the Login in Admin Dashboard.

The login box shakes every time when the user enters the wrong username and password.

In this tutorial, I show How you can create the similar kind of effect using jQuery UI.

What in the demonstration?

For demonstration, I am creating two examples – In first, I am creating a basic Login form which shakes on the wrong username and password and in the second example, using the arguments with shake effect.

How to shake an element using jQuery UI


Contents

  1. Shake Effect
  2. Examples
  3. Conclusion

1. Shake Effect

For shaking the element I am using the shake effect which shakes the element multiple times, in left,right,up, and down direction.

For using this you need to include jQuery UI library within your page. You can get from there Offical Website.

Syntax –

$(selector).effect( "shake"[, {arguments}]);

Example – 

$("#login").effect("shake");

Arguments –

direction − Set the direction of the effect to horizontally or vertically. It takes left,right,up, and down value.The default value is “left”.

distance − Distance to shake. The default is 20.

times − Times to shake. The default is 3.

Example – 

$("#login").effect( "shake", { direction: "up", times: 4, distance: 10}, 1000 );

2. Examples

# Example 1

A simple and basic example of the shake effect.

HTML

Creating a Login box.

Completed Code

<!doctype html>
<html>
<head>
 <title>How to Shake an element using jQuery UI</title>
 <link href="style.css" type="text/css" rel="stylesheet">
 <script src="jquery-3.0.0.js" type="text/javascript"></script>
 <script src="jquery-ui.js" type="text/javascript"></script>
 <script src="script.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
 <span id='response'></span>
 <div id='login'>
 <table width='100%'> 
  <tr>
   <td colspan='2'><h2>LOGIN</h2></td> 
  </tr>
  <tr>
   <td>
    <input type='text' placeholder='Username' id='txt_uname'>
   </td>
  </tr>
  <tr>
   <td>
    <input type='password' placeholder='Password' id='txt_pwd'>
   </td>
  </tr>
  <tr>
   <td>
    <input type='button' id='but_login' value='Login'>
   </td>
  </tr>
 </table>
 </div>

</div>
</body>
</html>

jQuery

Shake the login box when the user enters the wrong username and password using shake effect.

Completed Code

$( document ).ready(function() {

 $("#but_login").click(function(){
  var uname = $("#txt_uname").val().trim();
  var password = $("#txt_pwd").val().trim();

  // Check user
  if(uname != '' && password != ''){
   if(uname == 'makitweb' && password == '1234'){
    $("#response").hide();
    $("#response").text("Correct");
   }else{
    $("#response").show();
    $("#response").text("Incorrect username and password");

    // shake effect
    $( "#login" ).effect( "shake" );
   }
  }
 });
 
});

Output

Enter incorrect username and password to see the changes.


# Example 2

In the second example, using it with arguments.

HTML

<div>
 <select id='direction'>
  <option value='left' selected>Left</option>
  <option value='right'>Right</option>
  <option value='up'>Up</option>
  <option value='down'>Down</option>
 </select>
 <input type='text' value='5' id='times' placeholder='Tine'>
 <select id='distance'>
  <option value='10' selected>10</option>
  <option value='20'>20</option>
  <option value='30'>30</option>
  <option value='40'>40</option>
  <option value='50'>50</option>
 </select>
 <input type='button' value='Shake' id='shake'>
</div>
<div id='box'></div>

jQuery

Using element values in effect arguments when the button gets clicked.

$(document).ready(function(){
 $("#shake").click(function(){
  var direction = $("#direction").val();
  var times = $("#times").val();
  if(times == ""){
   times = 0;
  }
  var distance = $("#distance").val();

  // Using with arguments
  $("#box").effect( "shake", 
   { 
    direction: direction, 
    times: times, 
    distance: distance
   }, 1000 );
 });
 
});

Output

Set direction, time, and distance and click on Shake button to see the changes.


3. Conclusion

You can use this effect to draw user attention to the element or when someone enters the wrong value within the field. You need to include jQuery UI library to start working with it.

I have created some more tutorial using jQuery UI which you can also read –

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *