如何在按钮单击上使用Jquery Shake效果？

Question

What i want to do is to shake the textbox if the textbox is empty. But ia unable to do this. What i am doing is as follows :

$("#BtnSubmit").click(function() {
              if ($("#txt1").val() == '' || $("#TextBox1").val() == '' || $("#TextBox2").val()) {
                  $("#txt1").effect("shake")

              }

          });

<div id="keepTextBox">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <asp:TextBox ID="txt1" ForeColor="White" runat="server" Height="30px" Style="background-color: #46375E;"></asp:TextBox>&nbsp;&nbsp;
              <asp:RequiredFieldValidator ControlToValidate="txt1" ID="rftxt1" runat="server" SetFocusOnError="true"></asp:RequiredFieldValidator>
              <asp:TextBox ID="TextBox1" ForeColor="White" runat="server" Height="30px" Style="background-color: #46375E"></asp:TextBox>&nbsp;&nbsp;
              <asp:RequiredFieldValidator ControlToValidate="TextBox1" ID="rfTextBox1" runat="server"
                  SetFocusOnError="true"></asp:RequiredFieldValidator>
              <asp:TextBox ID="TextBox2" runat="server" ForeColor="White" Height="30px" Style="background-color: #46375E"></asp:TextBox>&nbsp;&nbsp;
              <asp:RequiredFieldValidator ControlToValidate="TextBox2" ID="rfTextBox2" runat="server"
                  SetFocusOnError="true"></asp:RequiredFieldValidator>
              <asp:Button ID="BtnSubmit" runat="server" Width="15%" Text="SIGN UP" ForeColor="White"
                  Style="background-color: #49A7E4; cursor: pointer;" Height="40px" /></div>
      </div>

Answer 1

You have to include jquery UI as dependency along with jquery to get the shake effect .

 $("#txt1").click(function() { $(this).effect( "shake" ); }); 

 <button id="txt1">shake it</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 

OR

if you dont want to include Jquery UI, then you will have to implement it as seen in this answer on SO .

 $("#txt").click(function(){ $(this).shake(); }); 

 <button id="txt">shake it</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> jQuery.fn.shake = function(intShakes, intDistance, intDuration) { intShakes = intShakes || 10; intDistance = intDistance || 2; intDuration = intDuration || 1000; this.each(function() { $(this).css("position","relative"); for (var x=1; x<=intShakes; x++) { $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4))) .animate({left:intDistance}, ((intDuration/intShakes)/2)) .animate({left:0}, (((intDuration/intShakes)/4))); } }); return this; }; </script>