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