Question

我想将div设置为零高度和宽度（或任何使其不可见的方式），以便jQuery UI中的scale函数可以将div扩展到div的大小的100％。我尝试了以下内容：

HTML：

<div class="button1">
<a class="home link" href="index.html" onclick="blur();">Home</a>
</div>

CSS：

.button1
  {
   position:absolute;
   top:186px;
   left:5px;
   z-index:1
  }

.home
  {
   display: block;
   width: 127px;
   height: 79px;
   text-indent: -9999px;
   overflow: auto;
   background: url('/aaron.chauvin/sitepics/home.png') bottom;
  }

.home:hover
  {
   background-position: 0 0;
  }

a.link:focus
  {
   border: none;
   outline: 4px ridge #0000FF;
  }

a.link
  {
   border: none;
   outline: none;
  }

a.link:active
  {
   border: none;
   outline: none;
  }

a.link:hover
  {
   border: none;
   outline: none;
  }

JS：

// This doesn't work for setting the div to be invisible , but I couldn't
// find the right method that works correctly with .effect()
$('.button1').effect( "scale", { percent: 0 }, 10 );
$('.button1').effect( "scale", { percent: 100 }, 1500 );

这不起作用。如果div已经可见，我甚至无法使div功能在div上正常工作（如果我省略js的第一行）。

我真的想使用scale（）这样div和它的内容似乎在页面上无处不在“增长”，但是如果有另一种方法来实现这一点（利用jQuery或jQuery UI），我愿意建议。此外，是否可以使用scale（）进行缓动效果和/或动画（假设我让它正常工作= P）？

编辑：我还应该提一下，我不希望在点击或悬停或任何事情上发生这种缩放效果，只是当页面加载和放大时。我想稍微延迟一下。

提前致谢。

Answer 1

这里的问题是，一旦DIV降低到原始大小的0％，无论你希望它缩放到什么百分比，它将始终保持原始大小的0％。如何缩放0到200％当前大小的元素？

尝试将其减少到0％以外的值，比如percent: 10，然后按percent: 1000增加。

OR

使用.effect( "size", { to: { width: 50, height: 10 } }, 500 );然后将其更改为您想要的任何大小。

OR

se .animate({"height": "toggle", "width":"toggle"},500)然后使用相同的方法将其恢复为原始大小。

jQuery UI规模问题

1 个答案: