Implementieren jQuery Shake-Effekt mit animieren

Question

Ich habe eine reduzierte Teilmenge der jQuery-Lib gegeben eine der wichtigsten Funktionen, die ich vermisse, ist die .effect Funktionen. Ich habe jedoch .animate. Ich habe mich gefragt, ob irgendjemand irgendwelche Ideen hätte, wie ich die Animationsfunktionen reproduzieren könnte.

Ich bin besonders daran interessiert, dies nur ein paar Zeilen zu machen, da ich die Code-Größe halten muss. Aus diesem Grund ist die jquery lib so klein wie sie ist und hat keine Effektfunktionen.

TLDR - Ich versuche

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

Mit etwas mit .animate in jQuery zu ersetzen.

Answer 1

Es ist tatsächlich bereits auf diese Weise unter den Deckeln implementiert, können Sie genau sehen, wie in jquery.effects.shake.js, wenn Sie nur diese Funktionalität kopieren möchten Sie können.

Ein anderer Ansatz zum Nachdenken: Wenn Sie mehrere Effekte verwenden, empfehle ich downloading jQuery UI with only the effects you want. Für diesen Effekt würden Sie, ohne die Funktionalität selbst zu kopieren, nur jquery.effects.core.js und jquery.effects.shake.js benötigen.

Answer 2

Bisher habe ich so etwas wie diese ..

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

Answer 3

Dies ist nicht perfekt, aber funktionelle

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

Answer 4

Ich verstehe nicht, die ganze Komplexität in der Wiedergabe den shake-Effekts mit geworfen ausschließlich animate. Hier ist meine Lösung in nur ein paar Zeilen.

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 

BEARBEITEN: Aktualisierter Code, um das Element an die ursprüngliche Position zurückzubringen. Glauben Sie immer noch, dass dies die leichteste und beste Lösung für das Problem ist.

Answer 5

Dies ist wahrscheinlich jetzt irrelevant, aber ich habe JQ UI Shake-Effekt als eigenständiges jQuery-Plugin portiert. Alles, was Sie brauchen, ist jQuery und es wird genauso funktionieren wie in der jQ UI.

Für diejenigen, die den Effekt verwenden möchten, ohne ihr Projekt mit unnötigen jQ UI-Kerndateien aufzublähen.

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

Es kann hier mit Anleitung zu finden: https://github.com/ninty9notout/jquery-shake

dachte ich, das hier für die Zukunft verlassen würde.

Answer 6

Ich schrieb ein paar einfache jQuery Animationen vor einiger Zeit:

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

Answer 7

Dies ist ein sauberer und glatter Weg, um die Animation zu tun.

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

Answer 8

Ich mag @phpslightly Lösung so viel, ich benutze es weiter.Also hier ist es zu grundlegender jQuery-Plugin Form aktualisiert, die Ihr Element

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

Sie würden es dann zurück verwenden wie eine normale Plugin:

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

oder die Standardwerte verwenden (100, 10, 3):

$("#your-element").shake(); 

Answer 9

@el Produzent Lösung Basierend auf, fügte ich einige mehrfach Logik und es wie eine zufällige schütteln aussehen.

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