¿Cómo puedo ejecutar múltiples efectos de jquery simultáneos?

Estoy animando algunos elementos de error / validación en una página. Quiero que reboten y se destaquen, pero al mismo tiempo si es posible. Esto es lo que estoy haciendo actualmente:

var els = $(".errorMsg"); els.effect("bounce", {times: 5}, 100); els.effect("highlight", {color: "#ffb0aa"}, 300); 

Esto hace que los elementos primero salten, y ENTONCES se destaquen, y me gustaría que ocurrieran simultáneamente. Sé que con .animate() puede especificar queue:false en las opciones, pero no quiero usar animate porque los efectos preestablecidos “rebotar” y “resaltar” son exactamente lo que quiero.

He intentado simplemente encadenar las llamadas como els.effect().effect() , y eso no funciona. También he intentado poner en queue:false en el objeto de opciones que paso, y eso no funciona.

jQuery UI pondrá en cola los efectos por defecto. Use dequeue () para ejecutar simultáneamente:

  var opt = {duration: 7000}; $('#lbl').effect('highlight', opt).dequeue().effect('bounce', opt); 

Demostración en JsFiddle

Ok, esta es una solución muy personalizada que combina los efectos de rebote y resaltado. Prefiero ver algún tipo de soporte de jquery para combinar estos más fácilmente, especificando {queue: false}, pero no creo que sea así de simple.

Lo que hice fue tomar jquery.effects.bounce.js y jquery.effects.highlight.js (de jquery-ui-1.8rc3), y combinar el código de los dos como DaveS sugirió, para crear un nuevo efecto llamado “hibounce”. “. En mi prueba, admite todas las opciones de ambos, y ocurren simultáneamente. ¡Se ve genial! Aunque no soy un gran admirador de soluciones como esta, debido al factor de mantenimiento. Cada vez que actualizo jquery.ui, también tendré que actualizar este archivo manualmente.

De todos modos, aquí está el resultado combinado (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.restre(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); 

Se puede usar como cualquier otro efecto ahora:

 var el = $("#div1"); el.effect("hibounce", {color: "#F00", times: 5}, 100); 

Las animaciones de cola de efectos de jQuery UI, por lo tanto, escriba su propia versión de una función de rebote / resaltado. Simplemente copie el código fuente de ambos en una sola función, limpie el código, y cada vez que llame animado, asegúrese de tener juntas la lógica de rebote y resaltado.

Puedes intentar esto:

 var els = $(".errorMsg"); setTimeout(function() { els.effect("bounce", {times: 5}, 100); }, 1); setTimeout(function() { els.effect("highlight", {color: "#ffb0aa"}, 300); }, 1); 

Eso debería llamar a ambos efectos más o menos al mismo tiempo, de forma asíncrona.