web-dev-qa-db-ja.com

animateを使用したjQueryのシェイク効果の実装

JQuery libのサブセットを切り詰めてもらいましたが、不足している重要な機能の1つは.effect関数です。しかし、私は.animateを持っています。どうすればアニメーション機能を再現できるのか、誰か考えてもらえないかと思っていました。

コードサイズを小さくする必要があるので、これを数行にすることを特に意識しています。これが、jquery libがそれと同じくらい小さく、エフェクト関数を持たない理由です。

TLDR-置き換えようとしています

 $("#"+id_string).effect( "shake", {}, "fast" );

JQuery内で.animateを使用するもの。

javascriptjqueryjquery-animate
14
wmitchell

それは実際にはすでにこの方法で隠されて実装されています、あなたは正確にどのように jquery.effects.shake.js 、その機能のみをコピーしたい場合は可能です。

考えるべき別のアプローチ：複数のエフェクトを使用している場合は、 必要なエフェクトのみを含むjQuery UIをダウンロードする をお勧めします。この効果を得るには、機能を自分でコピーせずに、必要なのは jquery.effects.core.js および jquery.effects.shake.js 。

9
Nick Craver

これまでのところ、私はこのようなものを持っています..

jQuery.fn.shake = function(intShakes, intDistance, intDuration) {
    this.each(function() {
        $(this).css("position","relative"); 
        for (var x=1; x<=intShakes; x++) {
        $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
    .animate({left:intDistance}, ((intDuration/intShakes)/2))
    .animate({left:0}, (((intDuration/intShakes)/4)));
    }
  });
return this;
};
45
wmitchell

私は@phpslightlyソリューションがとても好きで、それを使い続けています。したがって、ここでは、要素を返す基本的なjqueryプラグインフォームに更新されます

jQuery.fn.shake = function(interval,distance,times){
   interval = typeof interval == "undefined" ? 100 : interval;
   distance = typeof distance == "undefined" ? 10 : distance;
   times = typeof times == "undefined" ? 3 : times;
   var jTarget = $(this);
   jTarget.css('position','relative');
   for(var iter=0;iter<(times+1);iter++){
      jTarget.animate({ left: ((iter%2==0 ? distance : distance*-1))}, interval);
   }
   return jTarget.animate({ left: 0},interval);
}

その後、通常のプラグインのように使用します。

$("#your-element").shake(100,10,3);

または、デフォルト値（100、10、3）を使用します。

$("#your-element").shake();
8
el producer

これはおそらく今は関係ありませんが、jQUIのシェイク効果をスタンドアロンのjQueryプラグインとして移植しました。必要なのはjQueryだけで、jQUIで提供されるものとまったく同じように機能します。

不要なjQUIコアファイルでプロジェクトを実際に肥大化させずにエフェクトを使用したい場合。

$('#element').shake({...});

ここに説明があります： https://github.com/ninty9notout/jquery-shake

将来の参考のためにこれをここに残しておくと思いました。

6
ninty9notout

これは、アニメーションを実行するためのよりクリーンでスムーズな方法です。

jQuery.fn.shake = function(shakes, distance, duration) {
    if(shakes > 0) {
        this.each(function() {
            var $el = $(this);
            var left = $el.css('left');
            $el.animate({left: "-=" + distance}, duration, function(){
                $el.animate({left: "+=" + distance * 2}, duration, function() {
                    $el.animate({left: left}, duration, function() {
                        $el.shake(shakes-1, distance, duration); });});
            });
        });
    }
    return this;
};
3
Guilherme Oliveira

私は少し前にいくつかの簡単なjqueryアニメーションを書きました：

https://github.com/yckart/jquery-custom-animations

/**
 * @param {number} times - The number of shakes
 * @param {number} duration - The speed amount
 * @param {string} easing - The easing method
 * @param {function} complete - A callback function
 */
jQuery.fn.shake =
jQuery.fn.wiggle = function (times, duration, easing, complete) {
    var self = this;

    if (times > 0) {
        this.animate({
            marginLeft: times-- % 2 === 0 ? -15 : 15
        }, duration, easing, function () {
            self.wiggle(times, duration, easing, complete);
        });
    } else {
        this.animate({
            marginLeft: 0
        }, duration, easing, function () {
            if (jQuery.isFunction(complete)) {
                complete();
            }
        });
    }
    return this;
};
2
yckart

animateだけでシェイク効果を再現するために投げ込まれているすべての複雑さを理解していません。これが私の解決策です。

function shake(div,interval=100,distance=10,times=4){
    $(div).css('position','relative');
    for(var iter=0;iter<(times+1);iter++){
        $(div).animate({ left: ((iter%2==0 ? distance : distance*-1))}, interval);
    }//for
    $(div).animate({ left: 0},interval);
}//shake

編集：要素を元の位置に戻すようにコードを更新しました。それでも、これが問題に対する最も軽量で最良の解決策であると信じています。

1
phpslightly

@elプロデューサーソリューションに基づいて、乗算ロジックを追加し、ランダムなシェイクのように見せました。

jQuery.fn.shake = function (interval, distance, times) {
    interval = typeof interval == "undefined" ? 100 : interval;
    distance = typeof distance == "undefined" ? 10 : distance;
    times = typeof times == "undefined" ? 3 : times;
    var jTarget = $(this);
    jTarget.css('position', 'relative');
    for (var iter = 0; iter < (times + 1) ; iter++) {
        jTarget.animate({ top: ((iter % 2 == 0 ? distance * Math.random() : distance * Math.random() * -1)), left: ((iter % 2 == 0 ? distance * Math.random() : distance * Math.random() * -1)) }, interval);
    }
    return jTarget.animate({ top: 0 , left: 0 }, interval);
}
0
Chen Wang

これは完璧ではありませんが、機能的です

    // Example: $('#<% =ButtonTest.ClientID %>').myshake(3, 120, 3, false);
    jQuery.fn.myshake = function (steps, duration, amount, vertical) {
        var s = steps || 3;
        var d = duration || 120;
        var a = amount || 3;
        var v = vertical || false;
        this.css('position', 'relative');
        var cur = parseInt(this.css(v ? "top" : "left"), 10);
        if (isNaN(cur))
            cur = 0;

        var ds = d / s;

        if (v) {
            for (i = 0; i < s; i++)
                this.animate({ "top": cur + a + "px" }, ds).animate({ "top": cur - a + "px" }, ds);
            this.animate({ "top": cur }, 20);
        }
        else {
            for (i = 0; i < s; i++)
                this.animate({ "left": cur + a }, ds).animate({ "left": cur - a + "px" }, ds);
            this.animate({ "left": cur }, 20);
        }

        return this;
    }
0
Steinwolfe