【问题标题】：jQuery - Tremble images on event onClickjQuery - 事件 onClick 上的颤抖图像
【发布时间】：2014-04-09 15:42:35
【问题描述】：

我希望点击特定图像时，它会“颤抖”片刻。

这是我的代码 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 的每个图像；我该怎么办？

【问题讨论】：

标签： jquery image events animation

【解决方案1】：

你可以试试

Shake effect

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

Demo Fiddle

【讨论】：

【解决方案2】：

你可以用 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;
}

在 fiddle 上查看此代码以查看：http://jsfiddle.net/jCyD2/

此示例仅适用于 webkit 浏览器。

【讨论】：

小提琴没有任何反应，我使用的是 firefox 24.0
现在试试，我编辑使用 Firefox。 jsfiddle.net/jCyD2/1。请注意，此示例不适用于旧浏览器
仍然无法正常工作，等等，我认为它在第一次点击时发生了一些变化
此代码在 Firefox 上完美运行，但在 Safari（iOS 版本）上无法运行

【解决方案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);

【讨论】：