jquery - JQuery シェイクを使用して垂直方向に div を振る方法

Question

このコードを使用してdivを振る

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

縦に振ったり、振れる高さを設定したりできますか

Answer 1

Shake Effect APIに示されているように、directionおよび と呼ばれるオプションを設定できます。distance

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

jsFiddle デモ

---

シェイクエフェクト API

方向 (デフォルト: 「左」)

型:文字列 "left" または "right" の値は要素を水平方向に揺らし、"up" または "down" の値は要素を垂直方向に揺らします。この値は、効果の最初のステップで要素が軸に沿って移動する方向を指定します。

距離 (デフォルト: 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 でプロパティを変更するよりも少ないリソースを使用します。また、に適用された 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、その下のすべてを押し出さないようにしてください。

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);
});