11

我正在开发一个用户可以自定义的网站，我想让“振动/嗡嗡声”成为 DOM 的一个元素（在我的具体情况下它是一个DIV）。当您长按任何应用程序图标（所有图标都会摇晃）时，我想获得类似于 iOS 上发生的效果。

在网上搜索我刚刚找到了这个 jQuery 库： http: //www.dev4web.eu/projects/jquery.vibrate/

但是我不确定使用它是否能够获得良好的效果。

关于如何实现这一点的任何想法？

谢谢！

4

9 回答 9

4

您还可以像这样实现自己的动画：

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...
        });
    });
}
于 2013-03-19T14:27:11.567 回答
3

使用 jquery 的插件：

$('#loginL').effect('shake');
于 2015-04-22T19:22:09.010 回答
3

我最近构建了一些旨在模仿 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;    
}
于 2013-12-18T08:59:13.210 回答
3

这是一些 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 库。但是它不需要任何其他插件。

于 2015-06-22T15:27:02.590 回答
2

您可以使用jQueryRumble 之类的插件：http: //jackrugile.com/jrumble/

您可以使用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);
});

http://jsfiddle.net/VRzc9/1/

于 2013-03-19T14:24:07.930 回答
2

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

查看Marius Stanciu的Classy Wiggle JQuery 插件。

于 2013-03-19T14:04:30.830 回答
2 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
$('#shakediv').effect('shake');

jquery ui内置抖音效果，导入使用

于 2016-04-11T01:11:51.083 回答
0

按照下面的例子

<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>
于 2013-03-19T14:05:29.290 回答
0

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

于 2018-10-03T10:22:28.680 回答