Javascript 如何使DIV振动或嗡嗡作响？（类似于iOS移动/删除应用程序功能）

我正在开发一个用户可以自定义的网站，我想让“振动/嗡嗡声”成为DOM的一个元素（在我的特定情况下，它是一个

DIV

）。 我想获得一种类似于iOS上长按任何应用程序图标时的效果（所有图标都会抖动）

在web上搜索时，我刚刚找到了这个jQuery库：

但是我不确定我是否能用它获得一个好的效果

关于如何实现这一点有什么想法吗

谢谢

“jQuery ClassyWiggle允许您模拟iPhone上的图标在按住时的晃动效果。”

---

检查JQuery插件。

遵循以下示例

<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>

$（文档）.ready（函数（）{
buzzMe（）；
//或
buzzMeFor（0）
})
函数buzzMe（）
{
$（'buzz'）.css（'margin-left'，'-2'）；
延迟（500）；
$（'buzz'）.css（'margin-left'，'2'）；
延迟（500）；
buzzMe（）
}
//或在特定时间使用此功能
//调用并传递参数0
函数buzzMeFor（计数）
{
计数++；
$（'buzz'）.css（'margin-left'，'-2'）；
延迟（500）；
$（'buzz'）.css（'margin-left'，'2'）；
延迟（500）；
如果（计数！=20）
buzzMe（计数）
}

您可以使用一个插件，例如

jQuery

Rumble:

您可以使用

动画

创建自己的动画。例如（演示如何摇动div）：

$（“#嗡嗡声”）。单击（函数（）{
$（“#div”）。设置动画({
左：“20px”，
}, 50);
$（“#div”）。设置动画({
左：“-20px”，
}, 50);
$（“#div”）。设置动画({
左：“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摇摆效应的东西，它将在jQuerySortable之上使用。你可以在tastemakerx.com上看到它，我在那里用它来增强集合排序功能

这是我开始使用的小提琴：

下面是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;    
}

使用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);

var时间=10；
var持续时间=200；
对于（变量i=0；i<次；i++）
$（'div#shake it'）。设置动画({
左：（i%2==0？-“：”+“+”+“=50”
}，持续时间）；

与许多其他解决方案一样，它需要jQuery库。但是，它不需要任何其他插件。

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
$('#shakediv').effect('shake');

$（'shakediv'）。效果（'shake'）；

---

震动效果内置于jquery ui中，仅使用jquery的动画功能导入和使用

，以下操作完成：

函数递归抖动（jQelement、像素、计数器）{
如果（计数器>0）{
jQelement.animate({
“左边距”：“+=”.concat（像素，'px'）}，
30, 
递归抖动（jQelement，-像素，计数器-1）
);
}
}
//（计数器必须为偶数，以避免任何移位）

由于错误，我按了两次enter键，因此在完成之前已发布。请标记+1而不是负。真的很好的插件。有人知道Stanciu先生是否参与了这项活动吗？这也可以通过自定义代码来完成，那么为什么插件是的，CSS动画现在更容易访问，三年后。：）链接似乎不正确，并且没有版本控制，我看到您的JSFIDLE代码随着时间的推移发生了变化。正确，FIDLE发生了变化，因为我一直在开发我需要的功能。该网站已售出，CDN现在已下挫。不过，上面的css关键帧仍然可以正常工作。请随意制作一把新小提琴。这是迄今为止最好的解决方案，没有依赖性

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
$('#shakediv').effect('shake');