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

Question

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 al primer bote, y luego ser puesto de relieve, y me gustaría que ocurrir 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 intenté poner queue:false en el objeto de opciones que paso, y eso no funciona.

Answer 1

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.efectos.bounce.js y jquery.effects.highlight.js (de jquery-ui-1.8rc3), y combinar el código de los dos como sugirió DaveS, para crear un nuevo efecto llamado "hibounce". En mi prueba, admite todas las opciones de ambos, y ocurren simultáneamente. ¡Se ve genial! No soy un gran fan de soluciones como esta, debido al factor de mantenimiento. Cada vez que actualizo jquery.ui, también tendré que actualizar este archivo manualmente.

todos modos, aquí es 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.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); 

Se puede utilizar como cualquier otro efecto ahora:

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

Answer 2

Usted podría 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 tanto los efectos más o menos al mismo tiempo, de forma asíncrona.

Answer 3

jQuery IU efectos cola animaciones, así que 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.

Answer 4

jQuery UI pondrá en cola los efectos por defecto. Utilice quitar de la cola() para ejecutar de forma simultánea:

var opt = {duration: 7000}; 

    $('#lbl').effect('highlight', opt).dequeue().effect('bounce', opt); 

Demo in JsFiddle