如何制作DIV震动或嗡嗡声？（类似于iOS的移动/删除应用程序功能）

<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-19 14:05:29

这不会使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); 
});

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

来源

2013-03-19 14:24:07

你也可以实现自己的动画这样的：

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-19 14:27:11 Ilyssis

我建立的东西，是为了模仿最近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-18 08:59:13 jozecuervo

链接看起来不正确，没有版本化，我发现你的JSFiddle代码随着时间的推移而变化。 – Ryan 2017-09-06 01:17:45

使用jQuery的插件：

$('#loginL').effect('shake');

来源

2015-04-22 19:22:09 Gurkha

下面是一些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-22 15:27:02

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

的防抖效果是建立在jQuery UI的，进口和使用

来源

2016-04-11 01:11:51 chings228

如何制作DIV震动或嗡嗡声？ （类似于iOS的移动/删除应用程序功能）

回答

相关问题

如何制作DIV震动或嗡嗡声？（类似于iOS的移动/删除应用程序功能）