如何製作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的移動/刪除應用程序功能）