当用户点击图像时，如何应用“umph”效果？

Question

每当点击一张照片时，它就像一个小缩进......图像向内“向内”几个像素。然后当鼠标按钮关闭时，图片恢复正常。这就像一个“郁闷”的状态，就像大多数按钮一样。

理想情况下，是否有针对此的JQuery插件？

Answer 1

你不需要一个jQuery插件。以下内容将向下撞击元素并在鼠标按下时向右移动两个像素，然后将其移回到鼠标向上的原始位置。

$(".my_element").mousedown(function () {
  $(this).animate({ top : '+=2', left : '+=2' });
}).mouseup(function () {
  $(this).animate({ top : '-=2', left : '-=2' });
});

Answer 2

您可以使用一些简单的CSS来执行此操作：

a:active img {
    margin: 2px -2px -2px 2px;
}

负边距可以抵消正边距，以防止锚的宽度和高度发生变化，从而影响周围的元素。请参阅this simple jsfiddle以查看此内容。