Question

I want to set a div to zero height and width (or whatever it takes to get it invisible) so that the scale function in jQuery UI can scale the div up to 100% of the div’s size. I’ve tried the following:

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

This doesn’t work. I can’t even get the scale function to work properly on the div if it’s already visible (if I leave out the first line of js).

I really want to use scale() so that the div and it’s content seems to “grow” from nowhere on the page, but if there’s another means of achieving this (utilizing jQuery or jQuery UI), I’m open to suggestions. Also, is it possible to have an easing effect and/or animation with scale() (assuming I get it to work properly =P)?

Edit: I should also mention that I don’t want this scale effect to occur on click or hover or anything, just when the page loads & I want to delay it a bit.

Thanks in advance.

Answer 1

The problem here is once the DIV is reduced to 0% of the original size, no matter what percentage you want it to scale to, it will always remain at 0% of the original size. How do you scale an element of size 0 to 200% of it’s current size?

Try to reduce it to something other than 0%, say percent: 10 and then increase it by percent: 1000.

OR

Use .effect( "size", { to: { width: 50, height: 10 } }, 500 ); and then change it to whatever size you desire.

OR

se .animate({"height": "toggle", "width":"toggle"},500) and then use the same to bring it back to original size.