jQuery - 事件onClick上的顫抖圖像

Question

我想點擊一個特定的圖像，它「顫抖」了片刻。

這是我的代碼的html：

<div class="larger" id="miniGallery"> 

<div class="row spacer buttons-central"> 
    <div class="col-xs-4 col-sm-4 col-md-4"><a href="#"><img src="img/1.png" class="img-thumbnail img-responsive center-block"></a></div> 
    <div class="col-xs-4 col-sm-4 col-md-4"><a href="#"><img src="img/2.png" class="img-thumbnail img-responsive center-block"></a></div> 
    <div class="col-xs-4 col-sm-4 col-md-4"><a href="#"><img src="img/3.png" class="img-thumbnail img-responsive center-block"></a></div> 
</div> 

<div class="row spacer buttons-central"> 
    <div class="col-xs-4 col-sm-4 col-md-4"><a href="#"><img src="img/4.png" class="img-thumbnail img-responsive center-block"></a></div> 
    <div class="col-xs-4 col-sm-4 col-md-4"><a href="#"><img src="img/5.png" class="img-thumbnail img-responsive center-block"></a></div> 
    <div class="col-xs-4 col-sm-4 col-md-4"><a href="#"><img src="img/6.png" class="img-thumbnail img-responsive center-block"></a></div> 
</div> 

</div> 

這可能嗎？如果是，最大值將是一個單一的jQuery函數，適用於組miniGallery ID的每個圖像;我能怎麼做？

Answer 1

你可以用CSS3做到這一點：

例子：

HTML：

<div id="shake"> </div> 

CSS：

@-webkit-keyframes shakeelement { 
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } 
} 

#shake { 
    width: 50px; 
    height: 50px; 
    border: 1px solid red; 

} 

#shake:ACTIVE 
{ 
    -webkit-animation-name: shakeelement; 
    -webkit-animation-duration: 200ms; 
    -webkit-transform-origin:50% 50%; 
    -webkit-animation-iteration-count: 2; 
    -webkit-animation-timing-function: linear; 
} 

檢查搗鼓這個代碼來看看：http://jsfiddle.net/jCyD2/

這個例子只能在WebKit瀏覽器。

Answer 2

你可以嘗試

Shake effect

$("a img").click(function (e) { 
    $(this).effect("shake"); 
    e.stopPropagation(); 
}); 

Demo Fiddle

Answer 3

創建一個快捷功能http://jsfiddle.net/vZprf/1/

function tremble(el, speed, rotations) { 
    var i = 4; 
    var int = setInterval(function() { 
     var isod = i % 2; 
     var degree = Math.floor(Math.random() * 6) + 1 
     if (isod) degree = degree * (-1); 
     if (i == rotations) { 
      i = 4; 
      clearInterval(int); 
      degree = 0; 
     } else { 

      i++; 
     } 
     el.css({ 
      '-webkit-transform': 'rotate(' + degree + 'deg)', 
       '-moz-transform': 'rotate(' + degree + 'deg)', 
       '-ms-transform': 'rotate(' + degree + 'deg)', 
       '-o-transform': 'rotate(' + degree + 'deg)', 
       'transform': 'rotate(' + degree + 'deg)', 
       'zoom': 1 
     }); 
    }, speed); 
} 

tremble($(el), 50, 40); 

爲你的情況

$("img").click(function(){ 
    tremble($(this), 50, 40); 
}); 

它這樣使用

tremble(//element for rotating, //speed at which to rotate, //number of rotations);