jquery ui-effects-wrapper causando estragos

Question

Estoy usando jquery-ui y en algún momento utilizo las funciones show y hide bastante para animar las imágenes cambiantes que entran y salen.

Por algún motivo, después de algunos intentos, de repente los controles en mi página dejan de responder a los clics. Después de un poco de arbustos usando firebug, descubrí que mi página está llena de divs de la clase ui-effects-wrapper.

No tengo idea de por qué sucede esto o cómo detenerlo. Si elimino estos divs, ya no puedo ver las imágenes que he estado animando.

¿Alguna idea?

Answer 1

ui-effects-wrapper ha sido añadido por jquery UI effect plugin.

Aquí hay un código tomado de jquery.effects.core.js:

// Wraps the element around a wrapper that copies position properties 
createWrapper: function(element) { 

    // if the element is already wrapped, return it 
    if (element.parent().is('.ui-effects-wrapper')) { 
     return element.parent(); 
    } 

    // wrap the element 
    var props = { 
      width: element.outerWidth(true), 
      height: element.outerHeight(true), 
      'float': element.css('float') 
     }, 
     wrapper = $('<div></div>') 
      .addClass('ui-effects-wrapper') 
      .css({ 
       fontSize: '100%', 
       background: 'transparent', 
       border: 'none', 
       margin: 0, 
       padding: 0 
      }); 

    element.wrap(wrapper); 
    wrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually loose the reference to the wrapped element 

    // transfer positioning properties to the wrapper 
    if (element.css('position') == 'static') { 
     wrapper.css({ position: 'relative' }); 
     element.css({ position: 'relative' }); 
    } else { 
     $.extend(props, { 
      position: element.css('position'), 
      zIndex: element.css('z-index') 
     }); 
     $.each(['top', 'left', 'bottom', 'right'], function(i, pos) { 
      props[pos] = element.css(pos); 
      if (isNaN(parseInt(props[pos], 10))) { 
       props[pos] = 'auto'; 
      } 
     }); 
     element.css({position: 'relative', top: 0, left: 0, right: 'auto', bottom: 'auto' }); 
    } 

    return wrapper.css(props).show(); 
}, 

Answer 2

En una función, que tenían un código que alternar la visibilidad de dos botones y efectos empleadas como fadeTo y rebote. Ocasionalmente, quedaría un envoltorio. Intenté agregar esto a mi método, con la idea de que elimine las envolturas 1.1 segundos después de que los efectos hayan sido puestos en cola.

setTimeout('$(".ui-effects-wrapper").children().unwrap();', 1100); 

Esto elimina las envolturas rancio, pero existe la posibilidad de que también puede eliminar las envolturas subsiguientes que se utilizan para los efectos.

Estaría muy interesado en ver mejoras en esta técnica.