Thank you everyone for your suggestions. I was able to create the
upward expanding effect with the following code.
Jquery
$('.featureBox').hover(
function() {
$(this).animate({top:'-320px', height:'540px'},"slow");
},
function() {
$(this).animate({top:'0px', height:'150px'},"slow");
});
CSS
.featureBox{
width:182px;
height:150px;
position:relative;
overflow:hidden;
}
I'm sure this could be done in a cleaner way, but it expands upwards
nicely and then grows back down to it's original size. I'll post the
page when I get it up on Monday.
Tim
On Apr 11, 4:23 am, Mickster <micael.gustafs...@gmail.com> wrote:
> Depending on the context on your site, you can achieve that effect by
> placing you div in another div and then work with the marginTop
> property.
> We did it here:http://www.sleeq.com- if you move the mouse over the
> five "panels", you will see the divs "growing up" =)
>
> Good luck!
> Mickster
>
> On Apr 11, 7:16 am, Daniel Friesen <nadir.seen.f...@gmail.com> wrote:
>
> > You can also cause the illusion of the contents sticking as it grows by
> > messing with the scrollTop as it's animated. I don't know specifically
> > how one might do that with jQuery though.
> > Hmmm... maybe something like {scrollTop:"stick"} is plugin worthy.
>
> > ~Daniel Friesen (Dantman, Nadir-Seen-Fire)
>
> > Jeffrey Kretz wrote:
> > > If your div is absolutely positioned, you could do this a couple of
> > > different ways:
>
> > > 1) Set the bottom position of the div to a specific point. Then animating
> > > the height will cause it to grow upward.
> > > 2) Animate the top position of the div and the height at the same time.
>
> > > If you're not absolutely positioning your div, then I don't really know
> > > how
> > > you expect a div to animate "upward".
>
> > > JK
>
> > > -----Original Message-----
> > > From: jquery-ui@googlegroups.com [mailto:jquery...@googlegroups.com] On
> > > Behalf Of Daniel Friesen
> > > Sent: Friday, April 10, 2009 9:48 PM
> > > To: jquery-ui@googlegroups.com
> > > Subject: [jquery-ui] Re: Grow Div Upward
>
> > > All jQuery does is animate the height css value.
> > > That kind of functionality is beyond the scope of jQuery.
>
> > > How the animation looks (animate up/down) is dependent on the browser,
> > > in other words the other css applied to your div.
>
> > > Perhaps you question is better suited to the main jQuery list.
>
> > > ~Daniel Friesen (Dantman, Nadir-Seen-Fire)
>
> > > Tim wrote:
>
> > >> Using the animate function I only seem to be able to grow a div down,
> > >> instead I'd like to grow the div upwardly
>
> > >> Any ideas?
>
> > >> $(this).animate({height:'+=400px'},"slow");
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to jquery-ui@googlegroups.com
To unsubscribe from this group, send email to
jquery-ui+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
