Home/ Questions/Q 8005733
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T17:18:18+00:00

I have an element that’s going into a slideshow, and when the slide comes

  • 0

I have an element that’s going into a slideshow, and when the slide comes in, this element uses the jQuery UI effect explode to appear. 

$e.show('explode', {}, 1000);

When I first ran it, I didn’t see the element appear at all. So I thought “Oh, it must be z-index” and set the element’s z-index to 10 and made sure it had position defined. (The slide’s z-index is 5)

This made the image show up after the effect is complete. I hid the slide to test, and sure enough, the animation was happening behind the slide, seemingly with a lower z-index.

Why can’t I see the element until after the animation?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What’s Happening

    When certain elements are animating with jQuery UI, depending on the effect, the element itself may be cloned. The element that you are manipulating ($e) is actually hidden, and not part of the DOM at the time of animation, so your CSS rules are useless here. Some of the rules are applied to the cloned element with jQuery, however, z-index is not one of them.

    Fix it With CSS Animations

    I suggest using CSS Animations which directly manipulate your element, and have no need to clone the element. Though this makes effects like explode slightly more complex, not only are you maintaining your CSS rules, but CSS animations make for a huge performance gain over jQuery UI animations. (jQuery UI applies each ‘step’ of the animation individually, meaning many repaints). A limitation with this, however, is cross-browser compatibility, as it looks like IE is still not up to par with this.

    Fix it With z-index

    If you’re hell-bent on using jQuery UI for your animations, or can’t risk the lack of cross-browser compatibility, there is still hope. In my tests, the ‘cloned’ element gets a class added to it temporarily of ui-effects-explode. It seems that most jQuery UI animations that require cloning the original element apply a class with similar syntax (ui-effects-*).

    Your catch-all to save yourself the frustration on individual effects is to make a CSS-rule like the following:

    [class^=ui-effects] {
    z-index: 10;
}

    Where ^= means ‘begins with’. This will apply the z-index to any cloned elements within jQuery UI namespace, and should resolve your issue.

    • 0