当输入无效时在 div 上添加抖动效果

Posted 2023-03-10

【中文标题】当输入无效时在 div 上添加抖动效果

【英文标题】：Add a shake effect on a div when inputs are not valid

【发布时间】：2013-12-06 04:30:07

【问题描述】：

当输入无效（或未填充）时，我试图让这个 div 抖动：http://jsfiddle.net/jalxob/ahQLC/13/

我尝试自己使用：

    .effect('shake');

有人可以帮帮我吗？

谢谢！

【问题讨论】：

***.com/questions/8645361/shake-a-login-form-on-error 这里有一些很好的回应...

检查这个小提琴。 http://jsfiddle.net/f9wRU/3/

【参考方案1】：

您只需要包含 jQuery UI。在 JSFiddle 中，您需要在 Frameworks & Extensions 下的选项列表中选择 JQuery UI。假设这是在一个项目中，您需要包含 jQuery UI library。

【讨论】：

哦，我明白了。我是编码新手。非常感谢！

【参考方案2】：

尝试在任何你想调用它的地方使用它：

<div id="inputbox"></div>


$( document ).click(function() 
  $("#inputbox").effect( "shake" );
);

【参考方案3】：

animate.css 怎么样。你只需要animate.css

<button id="shakebtn">shake</button>

<div id="shakediv">
this is shake test. shake demo on div. please click shake button.
</div>
<script>
$('#shakebtn').click(function()
    $('#shakediv').removeClass().addClass('animated shake')
    .one('webkitAnimationEnd oAnimationEnd', function()
        $(this).removeClass();
   );
);
</script>

jsfiddle demo

【讨论】：

不错的非 jquery-ui 解决方案，但是 css 文件现在是 404

【参考方案4】：

试试这个

在您的文件中包含 Jquery UI JS 并使用 shake() 函数

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript">

DEMO