jquery ui-effects-wrapper causing havoc

Question

I am using jquery-ui and at some point I use the show and hide functions quite heavily to animate changing images coming in and out.

From some reason, after a few tries all of a sudden the controls on my page stop responding to clicks. After a bit of poking arround using firebug I discovered my page is filled with div's of the class ui-effects-wrapper.

I have no idea why this happens or how to stop it. If I remove these divs I can no longer see the images I've been animating.

Any ideas?

Answer 1

ui-effects-wrapper was added by jquery UI effect plugin.

Here is some code taken from 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

In one function, I had some code that toggled the visibility of two buttons and employed effects such as fadeTo and bounce. Occasionally there would be a wrapper remaining. I tried adding this to my method, the idea being that it removes the wrappers 1.1 seconds after the effects have been queued up.

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

This removes the stale wrappers, but there is the chance that it can also remove subsequent wrappers that are being used for effects.

I'd be very interested in seeing any improvements on this technique.