[jquery-dev] Re: .animate({prop: 'show'}) to animate set size to natural size
On Sat, 2009-03-21 at 13:33 -0400, John Resig wrote: > And how is the natural height determined if you've already explicitly > overwritten it with another value? It would be the 'auto' height. I've run into exactly the same problem recently: I have a list that I would like to show only partially (say only the first 4 elements), and when the user clicks a button, the list slides down to show the rest. What I thought I should do is: - have only the first 4 elements show, the rest will be hidden - on click, set the height of the list to the height of the first 4 elements (say it's 160px), set overflow to hidden, show the rest of the elements, then slidedown the list. But that doesn't work, as I haven't found a way to animate the list to the "auto" height. -- Dimi Paun Zipalong, Inc. --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@googlegroups.com To unsubscribe from this group, send email to jquery-dev+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~--~~~~--~~--~--~---
[jquery-dev] Re: .animate({prop: 'show'}) to animate set size to natural size
The problem there is that the height there becomes the end height.
"show" unsets the value after animation. A little more like.
var height = $(this).height();
$(this).hide().css({height: 5})
.animate({width: "show"})
.animate({height: height}, {complete: function() {$(this).css("height",
"");}});
But the idea of "natural" is that it can be used in more cases.
Basically it's a transition from any set property, to what it would be
like if it was unset.
~Daniel Friesen (Dantman, Nadir-Seen-Fire)
John Resig wrote:
> We swap the value out to get the value, but don't unset the value - and
> that's only for height and width.
>
> What you're talking about can be done like this:
>
> var height = $(this).height();
>
> $(this).hide().css({height: 5})
> .animate({width: "show"})
> .animate({height: height});
>
> That looks pretty simple to me!
>
> --John
>
>
> On Sat, Mar 21, 2009 at 6:18 PM, Daniel Friesen
> wrote:
>
>
>> I believe jQuery does it using swap and unsetting the value, right?
>>
>> ~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://nadir-seen-fire.com]
>> -Nadir-Point & Wiki-Tools (http://nadir-point.com) (http://wiki-tools.com)
>> -MonkeyScript (http://monkeyscript.org)
>> -Animepedia (http://anime.wikia.com)
>> -Narutopedia (http://naruto.wikia.com)
>> -Soul Eater Wiki (http://souleater.wikia.com)
>>
>> John Resig wrote:
>>
>>> And how is the natural height determined if you've already explicitly
>>> overwritten it with another value?
>>>
>>> --John
>>>
>>>
>>> On Fri, Mar 20, 2009 at 9:11 PM, Daniel Friesen
>>> wrote:
>>>
>>>
>>>
At work I tried to animate something to grow horizontally then grow
vertically.
.hide().css({height: 5}) // Use a small initial height so the growing
>> can
>>
be seen
.animate({width: "show"})
.animate({height: "show"});
The second half of the animation of course does not work because show
only animates a non-shown value to it's natural state.
I do not believe there is a proper way (besides doing ugly manual
calculations and basically duplicating some jQuery internal tricks
outside of jQuery) to smootly animate something to it's natural state.
Perhaps we could use something like a new "natural" option.
.hide().css({height: 5}) // Use a small initial height so the growing
>> can
>>
be seen
.animate({width: "natural"})
.animate({height: "natural"});
--
~Daniel Friesen (Dantman, Nadir-Seen-Fire)
>>>
>
> >
>
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to jquery-dev@googlegroups.com
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~--~~~~--~~--~--~---
[jquery-dev] Re: .animate({prop: 'show'}) to animate set size to natural size
We swap the value out to get the value, but don't unset the value - and
that's only for height and width.
What you're talking about can be done like this:
var height = $(this).height();
$(this).hide().css({height: 5})
.animate({width: "show"})
.animate({height: height});
That looks pretty simple to me!
--John
On Sat, Mar 21, 2009 at 6:18 PM, Daniel Friesen
wrote:
>
> I believe jQuery does it using swap and unsetting the value, right?
>
> ~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://nadir-seen-fire.com]
> -Nadir-Point & Wiki-Tools (http://nadir-point.com) (http://wiki-tools.com)
> -MonkeyScript (http://monkeyscript.org)
> -Animepedia (http://anime.wikia.com)
> -Narutopedia (http://naruto.wikia.com)
> -Soul Eater Wiki (http://souleater.wikia.com)
>
> John Resig wrote:
> > And how is the natural height determined if you've already explicitly
> > overwritten it with another value?
> >
> > --John
> >
> >
> > On Fri, Mar 20, 2009 at 9:11 PM, Daniel Friesen
> > wrote:
> >
> >
> >> At work I tried to animate something to grow horizontally then grow
> >> vertically.
> >>
> >> .hide().css({height: 5}) // Use a small initial height so the growing
> can
> >> be seen
> >> .animate({width: "show"})
> >> .animate({height: "show"});
> >>
> >>
> >> The second half of the animation of course does not work because show
> >> only animates a non-shown value to it's natural state.
> >>
> >> I do not believe there is a proper way (besides doing ugly manual
> >> calculations and basically duplicating some jQuery internal tricks
> >> outside of jQuery) to smootly animate something to it's natural state.
> >> Perhaps we could use something like a new "natural" option.
> >>
> >> .hide().css({height: 5}) // Use a small initial height so the growing
> can
> >> be seen
> >> .animate({width: "natural"})
> >> .animate({height: "natural"});
> >>
> >> --
> >> ~Daniel Friesen (Dantman, Nadir-Seen-Fire)
> >>
> >>
> >>
> >
> > >
> >
> >
>
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to jquery-dev@googlegroups.com
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~--~~~~--~~--~--~---
[jquery-dev] Re: .animate({prop: 'show'}) to animate set size to natural size
I believe jQuery does it using swap and unsetting the value, right?
~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://nadir-seen-fire.com]
-Nadir-Point & Wiki-Tools (http://nadir-point.com) (http://wiki-tools.com)
-MonkeyScript (http://monkeyscript.org)
-Animepedia (http://anime.wikia.com)
-Narutopedia (http://naruto.wikia.com)
-Soul Eater Wiki (http://souleater.wikia.com)
John Resig wrote:
> And how is the natural height determined if you've already explicitly
> overwritten it with another value?
>
> --John
>
>
> On Fri, Mar 20, 2009 at 9:11 PM, Daniel Friesen
> wrote:
>
>
>> At work I tried to animate something to grow horizontally then grow
>> vertically.
>>
>> .hide().css({height: 5}) // Use a small initial height so the growing can
>> be seen
>> .animate({width: "show"})
>> .animate({height: "show"});
>>
>>
>> The second half of the animation of course does not work because show
>> only animates a non-shown value to it's natural state.
>>
>> I do not believe there is a proper way (besides doing ugly manual
>> calculations and basically duplicating some jQuery internal tricks
>> outside of jQuery) to smootly animate something to it's natural state.
>> Perhaps we could use something like a new "natural" option.
>>
>> .hide().css({height: 5}) // Use a small initial height so the growing can
>> be seen
>> .animate({width: "natural"})
>> .animate({height: "natural"});
>>
>> --
>> ~Daniel Friesen (Dantman, Nadir-Seen-Fire)
>>
>>
>>
>
> >
>
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to jquery-dev@googlegroups.com
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~--~~~~--~~--~--~---
[jquery-dev] Re: .animate({prop: 'show'}) to animate set size to natural size
And how is the natural height determined if you've already explicitly
overwritten it with another value?
--John
On Fri, Mar 20, 2009 at 9:11 PM, Daniel Friesen
wrote:
>
> At work I tried to animate something to grow horizontally then grow
> vertically.
>
> .hide().css({height: 5}) // Use a small initial height so the growing can
> be seen
> .animate({width: "show"})
> .animate({height: "show"});
>
>
> The second half of the animation of course does not work because show
> only animates a non-shown value to it's natural state.
>
> I do not believe there is a proper way (besides doing ugly manual
> calculations and basically duplicating some jQuery internal tricks
> outside of jQuery) to smootly animate something to it's natural state.
> Perhaps we could use something like a new "natural" option.
>
> .hide().css({height: 5}) // Use a small initial height so the growing can
> be seen
> .animate({width: "natural"})
> .animate({height: "natural"});
>
> --
> ~Daniel Friesen (Dantman, Nadir-Seen-Fire)
>
>
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to jquery-dev@googlegroups.com
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~--~~~~--~~--~--~---
