用animate实现jQuery的震动效果
我已经获得了jQuery lib的一个减少的子集，我缺少的一个关键特性是.effect函数。 但我确实有.animate 。 我想知道是否有人会有任何想法如何重现动画function。
我特别想知道只需几行，因为我需要保持代码大小。 这就是为什么jquery lib尽可能小，并且没有效果函数。
TLDR – 我正在尝试更换
$("#"+id_string).effect( "shake", {}, "fast" );
在jQuery中使用.animate东西。
它实际上已经以这种方式实现了，你可以在jquery.effects.shake.js看到确切的内容，如果你只想复制那些function。
另一种思考方法：如果你使用多种效果，我建议你只使用你想要的效果下载jQuery UI 。 为此，不需要自己复制function，只需要jquery.effects.core.js和jquery.effects.shake.js 。
到目前为止，我有类似的东西..
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; };
这可能与现在无关，但我已经将jQ UI的震动效果移植为一个独立的jQuery插件。 所有你需要的是jQuery，它的工作方式与jQ UI中提供的完全相同。
对于那些想要使用效果而没有实际膨胀他们的项目与不必要的jQ UI核心文件的人。
$('#element').shake({...});
可以在这里找到指令： https ： //github.com/ninty9notout/jquery-shake
以为我会留在这里供将来参考。
我非常喜欢@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();
这是一种更干净，更流畅的动画制作方式。
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; };
我前段时间写过一些简单的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; };
我不明白所有复杂性都只是用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
编辑：更新代码以将元素返回到原始位置。 仍然相信这是解决问题的最轻和最好的解决方案。
这不完美，但function齐全
// 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; }
基于@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); }