使用动画实现jQuery的摇动效果

Question

我已经给出了jQuery lib的减少子集我缺少的一个主要功能是.effect函数。我确实有.animate。我想知道是否有人会对如何重现动画功能有任何想法。

由于我需要保持代码大小，所以我特别想做这几行。这就是为什么jQuery的lib是如此之小，并没有特效功能。

TLDR - 我试图取代

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

随着内使用jQuery的东西.animate。

Answer 1

它实际上已经以这种方式在封面上实现，您可以看到如何在jquery.effects.shake.js中完全如何，如果您只想复制您可以的功能。

另一种思考方法：如果您使用多种效果，建议使用downloading jQuery UI with only the effects you want。为此，如果不自己复制功能，则只需要jquery.effects.core.js和jquery.effects.shake.js。

Answer 2

到目前为止，我有这样的事情..

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

这是不完美的，但功能

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

我不明白，所有的复杂性被扔进再生与晃动的影响仅为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 

编辑：更新后的代码将元素返回到原始位置。仍然相信这是解决问题最轻松，最好的解决方案。

Answer 5

现在这可能是不相关的，但我已经将jQ UI的抖动效果作为独立的jQuery插件移植了。所有你需要的是jQuery，它的功能与jQ UI中提供的完全一样。

对于那些想要使用该效果而不需要使用不必要的jQ UI核心文件来扩展其项目的用户。

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

它可以在这里找到与指令：https://github.com/ninty9notout/jquery-shake

想我会离开这里了这个以供将来参考。

Answer 6

我写了前段时间一些简单的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; 
}; 

Answer 7

这是一个更清洁，光滑的方式做动画。

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

我喜欢@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(); 

Answer 9

基于@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); 
}