如何执行多个同时的jquery效果？
我正在为页面上的一些错误/validation元素设置动画。 我想让它们反弹并突出显示，但如果可能的话，同时也要突出显示。 这是我目前正在做的事情：
var els = $(".errorMsg"); els.effect("bounce", {times: 5}, 100); els.effect("highlight", {color: "#ffb0aa"}, 300); 这导致元素首先反弹，然后突出显示，我希望它们同时发生。 我知道使用.animate()你可以在选项中指定queue:false ，但我不想使用animate，因为预构建的效果“bounce”和“highlight”正是我想要的。
我试过简单地链接像els.effect().effect()这样的调用，但这不起作用。 我也尝试在我传入的选项对象中放入queue:false ，但这不起作用。
jQuery UI默认会对效果进行排队。 使用dequeue（）同时运行：
var opt = {duration: 7000}; $('#lbl').effect('highlight', opt).dequeue().effect('bounce', opt);
在JsFiddle演示
好的，所以这是一个非常自定义的解决方案，结合了反弹和高光效果。 我宁愿看到某些jquery支持更轻松地组合这些，指定{queue：false}，但我认为它不那么简单。
我做的是拿jquery.effects.bounce.js和jquery.effects.highlight.js（来自jquery-ui-1.8rc3），并结合DaveS建议的两个代码，创建一个名为“hibounce”的新效果”。 在我的测试中，它支持两者的所有选项，并且它们同时发生。 看起来不错！ 不过，由于维护因素，我不是这类解决方案的忠实粉丝。 无论何时我升级jquery.ui，我都必须手动更新这个文件。
无论如何，这是组合结果（jquery.effects.hibounce.js）
(function($) { $.effects.hibounce = function(o) { return this.queue(function() { // Highlight and bounce parts, combined var el = $(this), props = ['position','top','left','backgroundImage', 'backgroundColor', 'opacity'], mode = $.effects.setMode(el, o.options.mode || 'show'), animation = { backgroundColor: el.css('backgroundColor') }; // From highlight if (mode == 'hide') { animation.opacity = 0; } $.effects.save(el, props); // From bounce // Set options var mode = $.effects.setMode(el, o.options.mode || 'effect'); // Set Mode var direction = o.options.direction || 'up'; // Default direction var distance = o.options.distance || 20; // Default distance var times = o.options.times || 5; // Default # of times var speed = o.duration || 250; // Default speed per bounce if (/show|hide/.test(mode)) props.push('opacity'); // Avoid touching opacity to prevent clearType and PNG issues in IE // Adjust $.effects.save(el, props); el.show(); // Save & Show $.effects.createWrapper(el); // Create Wrapper var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left'; var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg'; var distance = o.options.distance || (ref == 'top' ? el.outerHeight({margin:true}) / 3 : el.outerWidth({margin:true}) / 3); if (mode == 'show') el.css('opacity', 0).css(ref, motion == 'pos' ? -distance : distance); // Shift if (mode == 'hide') distance = distance / (times * 2); if (mode != 'hide') times--; // from highlight el .show() .css({ backgroundImage: 'none', backgroundColor: o.options.color || '#ffff99' }) .animate(animation, { queue: false, duration: o.duration * times * 1.3, // cause the hilight to finish just after the bounces (looks best) easing: o.options.easing, complete: function() { (mode == 'hide' && el.hide()); $.effects.restore(el, props); (mode == 'show' && !$.support.opacity && this.style.removeAttribute('filter')); (o.callback && o.callback.apply(this, arguments)); el.dequeue(); } }); // Animate bounces if (mode == 'show') { // Show Bounce var animation = {opacity: 1}; animation[ref] = (motion == 'pos' ? '+=' : '-=') + distance; el.animate(animation, speed / 2, o.options.easing); distance = distance / 2; times--; }; for (var i = 0; i < times; i++) { // Bounces var animation1 = {}, animation2 = {}; animation1[ref] = (motion == 'pos' ? '-=' : '+=') + distance; animation2[ref] = (motion == 'pos' ? '+=' : '-=') + distance; el.animate(animation1, speed / 2, o.options.easing).animate(animation2, speed / 2, o.options.easing); distance = (mode == 'hide') ? distance * 2 : distance / 2; }; if (mode == 'hide') { // Last Bounce var animation = {opacity: 0}; animation[ref] = (motion == 'pos' ? '-=' : '+=') + distance; el.animate(animation, speed / 2, o.options.easing, function(){ el.hide(); // Hide $.effects.restore(el, props); $.effects.removeWrapper(el); // Restore if(o.callback) o.callback.apply(this, arguments); // Callback }); } else { var animation1 = {}, animation2 = {}; animation1[ref] = (motion == 'pos' ? '-=' : '+=') + distance; animation2[ref] = (motion == 'pos' ? '+=' : '-=') + distance; el.animate(animation1, speed / 2, o.options.easing).animate(animation2, speed / 2, o.options.easing, function(){ $.effects.restore(el, props); $.effects.removeWrapper(el); // Restore if(o.callback) o.callback.apply(this, arguments); // Callback }); }; el.queue('fx', function() { el.dequeue(); }); el.dequeue(); }); }; })(jQuery);
它现在可以像任何其他效果一样使用：
var el = $("#div1"); el.effect("hibounce", {color: "#F00", times: 5}, 100);
jQuery UI的效果排队动画，所以编写自己的弹跳/高亮function版本。 只需将源代码从两者复制到一个函数中，清理代码，每次调用动画时，确保将弹跳和高亮逻辑放在一起。
你可以试试这个：
var els = $(".errorMsg"); setTimeout(function() { els.effect("bounce", {times: 5}, 100); }, 1); setTimeout(function() { els.effect("highlight", {color: "#ffb0aa"}, 300); }, 1);
这应该在大致相同的时间同时调用这两种效果。