我得到了 jQuery 库的一个缩减子集，我缺少的一个关键特性是 .effect 函数。但是我确实有.animate。我想知道是否有人对我如何重现动画功能有任何想法。
我特别注意只写几行代码，因为我需要减小代码大小。这就是为什么 jquery 库这么小而且没有效果函数的原因。
TLDR - 我正在尝试替换
$("#"+id_string).effect( "shake", {}, "fast" );
在 jQuery 中使用 .animate 的东西。
【问题讨论】：
标签： javascript jquery jquery-animate
到目前为止，我有这样的东西..
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;
};
【讨论】：
(((...为什么？
(((s 的操作顺序
(((intDuration/intShakes)/4)) - 可以替换为这个 - intDuration/intShakes/4 - 而不会改变操作的顺序。另外，请注意双重包装 - ((expression)) - 这没有任何作用。
我非常喜欢@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();
【讨论】：
function (interval = 100, distance = 10, times = 1){
实际上已经在幕后以这种方式实现了，如果您只想复制该功能，您可以在jquery.effects.shake.js 中查看具体实现方式。
另一种思考方式：如果您使用多种效果，我建议您使用downloading jQuery UI with only the effects you want。对于这种效果，无需自己复制功能，您只需要jquery.effects.core.js 和jquery.effects.shake.js。
【讨论】：
现在这可能无关紧要，但我已将 jQ UI 的抖动效果移植为独立的 jQuery 插件。您所需要的只是 jQuery，它的工作方式与 jQ UI 中提供的完全一样。
对于那些想要使用效果而不用不必要的 jQ UI 核心文件实际使项目膨胀的人。
$('#element').shake({...});
可以在这里找到说明：https://github.com/ninty9notout/jquery-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
编辑：更新代码以将元素返回到原始位置。仍然相信这是解决问题的最简单和最好的解决方案。
【讨论】：
这并不完美，但很实用
// 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 producer 解决方案，我添加了一些乘法逻辑，使其看起来像随机抖动。
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);
}
【讨论】：