如何使用JQuery抖动垂直抖动div

Question

我使用此代码来动摇div

$(".target").effect( "shake", 
      {times:4}, 1000 );

是否可以垂直摇动并设置摇动高度

Answer 1

您可以设置名为direction和distance的选项，如Shake Effect API所示。

$(".target").effect( "shake", { direction: "up", times: 4, distance: 10}, 1000 );

jsFiddle Demo

---

Shake Effect API

  

方向（默认：“左”）

     

类型：字符串值“left”或“right”   将水平摇动元素，并将值“向上”或“向下”   将垂直摇动元素。该值指定了哪个方向   元素应该沿着轴移动第一步   效果。

     

距离（默认值：20）

     

输入：数字   摇晃的距离。

Answer 2

以下是使用简单的jQuery和JavaScript知识的方法： setInterval：

jQuery.fn.shake = function() {
    $el = $(this);
    setInterval(function(){ 
        if ($el.hasClass('shake')) {
            $el.removeClass('shake');
        } else {
            $el.addClass('shake');
        };  
    }, 320);
};

$('.button').shake();

添加和删除类比修改DOM中的属性使用更少的资源。我们还可以利用应用于.button：

的CSS过渡

.button {  margin-top: 0;
    -webkit-transition: margin-top 300ms ease-out;
    -moz-transition: margin-top 300ms ease-out;
    -o-transition: margin-top 300ms ease-out;
    transition: margin-top 300ms ease-out; }
.button.shake { margin-top: 15px; }

最后注意事项，请确保您的.button元素放在带有position: absolute的div中，这样它就不会推动它下面的所有内容。

Answer 3

您可以在Jquery或CSS中执行此操作

1. jQuery 使用此插件：

http://jackrugile.com/jrumble/

2的 CSS

http://elrumordelaluz.github.io/csshake/

希望这有帮助。

Answer 4

由于jQueryUI是必需的，我不想包含库，这里是一个使用下划线的解决方案（对于使用下划线的解决方案）

_(4).times(function(n){
    _.delay(function(){
        $("element").css("margin-left", (((n+1)%2)*5)+"px");
    }, n*70);
});

Answer 5

A /纯CSS，没有JS依赖关系-鼠标悬停时会震动：

.target:hover{
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  25% { transform: translate(-1px, -2px) rotate(-1deg); }
  50% { transform: translate(1px, -1px) rotate(1deg); }
  75% { transform: translate(3px, 1px) rotate(-1deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

B /使用jQuery控制-在click上开始摇动，在mouseout上停止：

$(".target").on("click", function(){
    $(this).css({
        'animation' : 'shake 0.5s',
        'animation-iteration-count' : 'infinite'
    });
}).on("mouseout", function(){
    $(this).css({
        'animation' : '',
        'animation-iteration-count' : ''
    });
})