jQuery UI比例尺问题

问题描述

| 我想将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上正常使用它（如果我不考虑js的第一行）。 我真的很想使用scale（），以便div及其内容似乎从页面上的任何地方都“增长”，但是如果还有另一种方法（使用jQuery或jQuery UI）来实现，我愿意提出建议。另外，是否可以使用scale（）来产生缓动效果和/或动画（假设我让它正常工作= P）？ 编辑：我还应该提到，我不希望这种缩放效果在单击或悬停或发生任何其他事情时发生，仅在页面加载时出现，我想稍微延迟一下。 提前致谢。     

解决方法

        这里的问题是，一旦将DIV减小到原始大小的0％，无论您要缩放到什么百分比，它都将始终保持在原始大小的0％。如何缩放大小为0到当前大小200％的元素？ 尝试将其减少到0％以外的值，例如

percent: 10

，然后再增加

percent: 1000

。 要么 使用

.effect( \"size\",{  to: { width: 50,height: 10 } },500 );

，然后将其更改为所需的大小。 要么 se

.animate({\"height\": \"toggle\",\"width\":\"toggle\"},500)

，然后将其恢复为原始大小。