jquery 爆炸效果不适用于百分比宽度/高度答案

【问题标题】：jquery explode effect not working with percentage width/heightjquery 爆炸效果不适用于百分比宽度/高度
【发布时间】：2012-11-08 13:41:06
【问题描述】：

当使用它的元素的宽度/高度由百分比定义时，我似乎无法让 jQuery 爆炸效果起作用。它没有分解成碎片，而是从屏幕左侧进出/飘出。

例子：

        <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>

应该是这样吗？有什么解决办法吗？到目前为止，我在谷歌上搜索时找不到任何相关内容。

干杯。

【问题讨论】：

标签： jquery jquery-ui jquery-effects

【解决方案1】：

您可以通过知道窗口的宽度和高度来动态设置宽度和高度（以像素为单位）

以下答案将对您有所帮助： jQuery: How to detect window width on the fly?

【讨论】：

是的，这就是我最终所做的。