4

我用这段代码来摇一个 div

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

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

4

5 回答 5

18

您可以设置调用的选项direction，distance如Shake Effect API中所示。

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

jsFiddle 演示

震动效果 API

方向（默认：“左”）

类型：字符串 “left”或“right”的值将水平晃动元素，“up”或“down”的值将垂直晃动元素。该值指定元素应在效果的第一步沿轴移动的方向。

距离（默认：20）

类型：数字 要摇晃的距离。

于 2013-09-14T12:45:27.193 回答
3

下面是我使用简单的 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 中的属性使用更少的资源。我们还可以利用应用于我们的 CSS 过渡.button：

.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元素被放置在一个 div 中，position: absolute这样它就不会推动它下面的所有东西。

于 2015-08-18T09:56:21.127 回答
2

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' : ''
    });
})
于 2019-11-01T18:02:44.880 回答
1

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

1. jQuery使用这个插件：

http://jackrugile.com/jrumble/

2.CSS _

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

希望这可以帮助。

于 2015-07-18T13:27:04.640 回答
0

由于需要 jQueryUI 并且我不想包含该库，因此这是使用下划线的解决方案（对于使用下划线的解决方案）

_(4).times(function(n){
    _.delay(function(){
        $("element").css("margin-left", (((n+1)%2)*5)+"px");
    }, n*70);
});
于 2016-08-11T08:04:50.883 回答