javascript - 如何在 Button 单击时使用 Jquery Shake 效果？

Question

我想做的是在文本框为空时摇动文本框。但我无法做到这一点。我正在做的事情如下:

$("#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

您必须将 jquery UI 作为依赖项与 jquery 一起包含在内才能获得 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>

或

如果您不想包含 Jquery UI，那么您将必须按照 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>