jquery explode effect not working with percentage width/height

StackOverflow https://stackoverflow.com/questions/13290086

题

I can't seem to get the jQuery explode effect to work when the element it's being used on has a width/height defined by a percentage. Rather than breaking up into pieces, it just sort of floats in/out from/to the left of the screen.

Example:

        <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
#mydiv
{
  background-color: aqua;
  width: 50%;
  height: 50%;
  display: block;
  z-index: 100;
}

#mydiv2
{
  background-color: red;
  width: 500px;
  height: 500px;
  display: block;
z-index: 100;
}
</style>
    </head>
    <body>
        <a href="#" onclick="$('#mydiv').toggle('explode', {}, 1000);">click %</a> <a href="#" onclick="$('#mydiv2').toggle('explode', {}, 1000);">click px</a>
        <div id="mydiv">% width</div>
<br>
<div id="mydiv2">px width</div>
    </body>
</html>

Is that supposed to be the case? Is there some sort of work around? I can't find anything relevant when googling it as of yet.

Cheers.

有帮助吗？

解决方案

You are able to dynamically set the width and height in pixels by knowing the window width and height

The following answer will help you: jQuery: How to detect window width on the fly?

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top