javascript 如何使 DIV 振动或嗡嗡声？（类似于 iOS 移动/删除应用功能）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15501585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a DIV vibrate or buzz? (similar to the iOS move/delete app feature)
提问by Marco Matarazzi
I'm working on a website that the user can customize and I'd like to make "vibrate/buzz" an element of the DOM (in my specific case it's a DIV).
I'd like to obtain an effect similar to the one that happens on iOS when you long press any app icon (all the icons get shaky).
我正在开发一个用户可以自定义的网站，我想让“振动/嗡嗡声”成为 DOM 的一个元素（在我的特定情况下它是一个DIV）。我想获得类似于在 iOS 上长按任何应用程序图标时发生的效果（所有图标都会抖动）。
Searching on the web I just found this jQuery library: http://www.dev4web.eu/projects/jquery.vibrate/
在网上搜索我刚刚找到了这个 jQuery 库：http: //www.dev4web.eu/projects/jquery.vibrate/
But I'm not sure that I'll be able to obtain a nice effect using it.
但是我不确定使用它是否能够获得不错的效果。
Any ideas on how to implement this?
关于如何实现这一点的任何想法？
Thanks!
谢谢！
采纳答案by isherwood
"jQuery ClassyWiggle allows you to emulate the wiggle effect icons on an iPhone have when you press and hold down on them. "
“jQuery ClassyWiggle 允许您模拟 iPhone 上图标的摆动效果，当您按住它们时。”
Check the Classy WiggleJQuery plugin by Marius Stanciu.
查看Marius Stanciu的Classy WiggleJQuery 插件。
回答by Ilyssis
You could also implement your own animation like this:
你也可以像这样实现你自己的动画：
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...
});
});
}
回答by jozecuervo
I built something that was intended to mimic the iOS wiggle effect recently to be used in on top of jQuery sortable. You can see it live on tastemakerx.com where I used it to enhance a collection sorting feature.
我最近构建了一些旨在模仿 iOS 摆动效果的东西，以便在 jQuery 可排序之上使用。你可以在tastemakerx.com 上看到它，我用它来增强收藏分类功能。
Here's the fiddle I started with: http://jsfiddle.net/jozecuervo/fv8vR/
这是我开始的小提琴：http: //jsfiddle.net/jozecuervo/fv8vR/
And here's the CSS:
这是 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;
}
回答by Gurkha
Use jquery's plugin:
使用 jquery 的插件：
$('#loginL').effect('shake');
回答by Scaramouche
Here is some Javascript that will do what you're looking for.
这里有一些 Javascript 可以满足您的需求。
var times = 10;
var duration = 200;
for (var i = 0; i < times; i++)
$('div#shake-it').animate({
left: (i % 2 === 0 ? "-" : "+") + "=50"
}, duration);
Like many of the other solutions, it requires the jQuery library. However it doesn't need any other plugins.
像许多其他解决方案一样，它需要 jQuery 库。但是它不需要任何其他插件。
回答by chings228
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
$('#shakediv').effect('shake');
the shake effect is built in jquery ui , import and use
抖动效果内置于jquery ui 中，导入使用
回答by Darren
You could use a plugin such as jQueryRumble: http://Hymanrugile.com/jrumble/
您可以使用jQueryRumble等插件：http: //Hymanrugile.com/jrumble/
You could create your own using animate. As an example (To demonstrate how to shake the div):
您可以使用animate. 作为一个例子（为了演示如何摇动 div）：
<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);
});
回答by Manoj Pilania
follow the below example
按照下面的例子
<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>
回答by Alex
Using only jQuery's animate function, the following does the trick :
仅使用 jQuery 的 animate 函数，以下操作即可：
function recursiveShake(jQelement, pixel, counter) {
if (counter > 0) {
jQelement.animate({
'margin-left': '+='.concat(pixel, 'px')},
30,
recursiveShake(jQelement, -pixel, counter - 1)
);
}
}
// (counter must be even to avoid any shift)