如何制作DIV震动或嗡嗡声？ （类似于iOS的移动/删除应用程序功能）
我正在使用一个网站，用户可以自定义，我想使“振动/嗡嗡声”的DOM元素（在我的具体情况下它是一个DIV ）。 我想获得类似于iOS上长按任何应用程序图标（所有图标抖动）时发生的效果。如何制作DIV震动或嗡嗡声？ （类似于iOS的移动/删除应用程序功能）
搜索网页我刚刚发现这个jQuery库上： http://www.dev4web.eu/projects/jquery.vibrate/
但我不知道，我将能够获得使用它一个很好的效果。
关于如何实现这个的任何想法？
谢谢！
按照下面的例子
<div class="buzz">
<!-- Your Div Content Here -->
</div>
<script>
$(docuement).ready(function(){
buzzMe();
//or
buzzMeFor(0)
})
function buzzMe()
{
$('buzz').css('margin-left','-2');
delay(500);
$('buzz').css('margin-left','2');
delay(500);
buzzMe()
}
//Or use this function for Specific times
//Call & Pass Arguments 0
function buzzMeFor(count)
{
count++;
$('buzz').css('margin-left','-2');
delay(500);
$('buzz').css('margin-left','2');
delay(500);
if(count!=20)
buzzMe(count)
}
</script>
这不会使div“嗡嗡”.... – 2013-03-19 14:07:04
这很搞笑，谢谢！大声笑 – 2013-03-19 14:11:13
由我按错误输入两次，所以是我完成前发布。请标记+1而不是减号。 – 2013-03-19 14:25:06
你可以使用插件如jQuery隆隆声：http://jackrugile.com/jrumble/
你可以创建你使用animate自己。作为一个例子（为了演示如何撼动格）：
<div id="div">
</div>
<input type="button" id="buzz" />
$("#buzz").click(function() {
$("#div").animate({
left: "20px",
}, 50);
$("#div").animate({
left: "-20px",
}, 50);
$("#div").animate({
left: "20px",
},50);
});
你也可以实现自己的动画这样的：
function shake(){
$('#div').animate({
'margin-left': '-=5px',
'margin-right': '+=5px'
}, 200, function() {
$('#div').animate({
'margin-left': '+=5px',
'margin-right': '-=5px'
}, 200, function() {
//and so on...
});
});
}
我建立的东西，是为了模仿最近iOS的摆动效应被用在jQuery排序的顶端。你可以在tastemakerx.com上看到它，我用它来增强收藏分类功能。
这是我开始与小提琴： http://jsfiddle.net/jozecuervo/fv8vR/
而这里的CSS：
@-webkit-keyframes shake {
0%, 100% {-webkit-transform: translateX(0) rotate(0deg) translateY(0);}
15%, 35%, 55%, 75%, 95% {-webkit-transform: translateX(-1px) rotate(-2deg) ;}
25%, 45%, 65%, 85% {-webkit-transform: translateX(1px) rotate(2deg); }
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(1px);}
20%, 40%, 60%, 80% {-webkit-transform: translateY(-1px); }
}
@-moz-keyframes shake {
0%, 100% {-moz-transform: translateX(0) rotate(0deg) translateY(0);}
15%, 35%, 55%, 75%, 95% {-moz-transform: translateX(-1px) rotate(-2deg) ;}
25%, 45%, 65%, 85% {-moz-transform: translateX(1px) rotate(2deg); }
10%, 30%, 50%, 70%, 90% {-moz-transform: translateY(1px);}
20%, 40%, 60%, 80% {-moz-transform: translateY(-1px); }
}
@-o-keyframes shake {
0%, 100% {-o-transform: translateX(0) rotate(0deg) translateY(0);}
15%, 35%, 55%, 75%, 95% {-o-transform: translateX(-1px) rotate(-2deg) ;}
25%, 45%, 65%, 85% {-o-transform: translateX(1px) rotate(2deg); }
10%, 30%, 50%, 70%, 90% {-o-transform: translateY(1px);}
20%, 40%, 60%, 80% {-o-transform: translateY(-1px); }
}
@keyframes shake {
0%, 100% {transform: translateX(0) rotate(0deg) translateY(0);}
15%, 35%, 55%, 75%, 95% {transform: translateX(-1px) rotate(-2deg) ;}
25%, 45%, 65%, 85% {transform: translateX(1px) rotate(2deg); }
10%, 30%, 50%, 70%, 90% {transform: translateY(1px);}
20%, 40%, 60%, 80% {transform: translateY(-1px); }
}
.shake {
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transition-timing-function:linear;
}
链接看起来不正确，没有版本化，我发现你的JSFiddle代码随着时间的推移而变化。 – Ryan 2017-09-06 01:17:45
使用jQuery的插件：
$('#loginL').effect('shake');
下面是一些JavaScript将做什么你”重新寻找。
var times = 10;
var duration = 200;
for (var i = 0; i < times; i++)
$('div#shake-it').animate({
left: (i % 2 === 0 ? "-" : "+") + "=50"
}, duration);
像许多其他解决方案一样，它需要jQuery库。但它不需要任何其他插件。
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
$('#shakediv').effect('shake');
的防抖效果是建立在jQuery UI的，进口和使用
真的好插件。有谁知道Stanciu先生是否参加了SO？ – Mindwin 2014-02-19 17:48:35
它也可以用自定义代码完成，然后为什么插件 – 2016-03-25 10:16:36
是的，3年后现在更容易访问CSS动画。 :) – isherwood 2016-03-25 13:42:48