Issues with fade animations

[Jörn Zaefferer-2]

Hi,

I've built a testpage to document this issues with fadeIn/Out: http://jquery-ui.googlecode.com/svn/branches/labs/fadequeue/index.html

As written on that page, the issues are:

• Without using stop(), animations just queue up, thats inacceptable
• With just using stop(), styles end up in the middle, screwing up the next fade, that is, stopping a fadeout half way through will cause the next fade in to not fade to 1
• Using stop(false, true) will finish the animations, which worksaround the above problems, but the result is ugly, as a stopped fadeout will skip to the end, then fade in again from 0, instead of just fading in from the current opacity
• The crazy complicated stuff, using a mix of fadeIn/Out and fadeTo, apart from being way too complicated, has the big drawback that the fadeTo-animations take exactly as long as the others, while it usually doesn't fade from 0 to 1, but only from, say, 0.7 to 1. Adding a calculation to figure out how long the animation should be relative to the current opacity would make this just more complicated.
• fadeIn/Out can use opacity values defined in CSS stylesheets, while fadeTo requires the user to specify the opacity

My goal for now is to create a plugin, with your help, that can be used instead of fadeIn/Out. It would not queue up animations, it would read opacity from stylesheets, just like fadeIn/Out do, and it would adjust the animation duration relative to the current opacity if a fade is stopped/reversed, so that if a fade in is stopped half-way through by a fadeout, the fadeout would only take half the specified duration, resulting in the same animation speed all the time.

Based on how the plugin ends up, I hope we can port back something to jQuery Core to make that available just as easily as fadeIn/Out.

Looking forward to your ideas.

Jörn

--

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@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

[John Resig]

So it seems like a couple things would fix your problems:
1) If fadeIn or fadeOut is called while a partial opacity is shown
then animate to the final state, starting from the current opacity
(right now fadeIn, in particular, won't run).
2) Make the actual time to run the animation be equal to
currentOpacityDiff * timeToRunAnimation (where currentOpacityDiff is a
number 0 to 1).
3) Make fadeTo show an element if it's not visible.

The only remaining issue is to figure out how the queueing should
work. It seems like you would just still need to call .stop() before
running any animation.

--John



On Sun, Nov 8, 2009 at 11:22 AM, Jörn Zaefferer
<joern.zaefferer@...> wrote:

> Hi,
>
> I've built a testpage to document this issues with fadeIn/Out:
> http://jquery-ui.googlecode.com/svn/branches/labs/fadequeue/index.html
>
> As written on that page, the issues are:
>
> Without using stop(), animations just queue up, thats inacceptable
> With just using stop(), styles end up in the middle, screwing up the next
> fade, that is, stopping a fadeout half way through will cause the next fade
> in to not fade to 1
> Using stop(false, true) will finish the animations, which worksaround the
> above problems, but the result is ugly, as a stopped fadeout will skip to
> the end, then fade in again from 0, instead of just fading in from the
> current opacity
> The crazy complicated stuff, using a mix of fadeIn/Out and fadeTo, apart
> from being way too complicated, has the big drawback that the
> fadeTo-animations take exactly as long as the others, while it usually
> doesn't fade from 0 to 1, but only from, say, 0.7 to 1. Adding a calculation
> to figure out how long the animation should be relative to the current
> opacity would make this just more complicated.
> fadeIn/Out can use opacity values defined in CSS stylesheets, while fadeTo
> requires the user to specify the opacity
>
> My goal for now is to create a plugin, with your help, that can be used
> instead of fadeIn/Out. It would not queue up animations, it would read
> opacity from stylesheets, just like fadeIn/Out do, and it would adjust the
> animation duration relative to the current opacity if a fade is
> stopped/reversed, so that if a fade in is stopped half-way through by a
> fadeout, the fadeout would only take half the specified duration, resulting
> in the same animation speed all the time.
>
> Based on how the plugin ends up, I hope we can port back something to jQuery
> Core to make that available just as easily as fadeIn/Out.
>
> Looking forward to your ideas.
>
> Jörn
>
> --
>
> 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@....
> To unsubscribe from this group, send email to
> jquery-dev+unsubscribe@....
> For more options, visit this group at
> http://groups.google.com/group/jquery-dev?hl=en.
>

--

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@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

[Jörn Zaefferer-2]

That sounds great. I think in case of my Tooltip plugin there is an additional problem, where a mouseover event doesn't happen when the mouse is over a tooltip element that still fades out. I may be able to fix that with mousemove.

So, if we can get these three fixed and that other issue, the jQuery UI Tooltip would be mostly done.

Should I create a ticket for these?

Jörn

On Sun, Nov 8, 2009 at 12:06 PM, John Resig <jeresig@...> wrote:

So it seems like a couple things would fix your problems:
1) If fadeIn or fadeOut is called while a partial opacity is shown
then animate to the final state, starting from the current opacity
(right now fadeIn, in particular, won't run).
2) Make the actual time to run the animation be equal to
currentOpacityDiff * timeToRunAnimation (where currentOpacityDiff is a
number 0 to 1).
3) Make fadeTo show an element if it's not visible.

The only remaining issue is to figure out how the queueing should
work. It seems like you would just still need to call .stop() before
running any animation.

--John

On Sun, Nov 8, 2009 at 11:22 AM, Jörn Zaefferer
<joern.zaefferer@...> wrote:
> Hi,
>
> I've built a testpage to document this issues with fadeIn/Out:
> http://jquery-ui.googlecode.com/svn/branches/labs/fadequeue/index.html
>
> As written on that page, the issues are:
>
> Without using stop(), animations just queue up, thats inacceptable
> With just using stop(), styles end up in the middle, screwing up the next
> fade, that is, stopping a fadeout half way through will cause the next fade
> in to not fade to 1
> Using stop(false, true) will finish the animations, which worksaround the
> above problems, but the result is ugly, as a stopped fadeout will skip to
> the end, then fade in again from 0, instead of just fading in from the
> current opacity
> The crazy complicated stuff, using a mix of fadeIn/Out and fadeTo, apart
> from being way too complicated, has the big drawback that the
> fadeTo-animations take exactly as long as the others, while it usually
> doesn't fade from 0 to 1, but only from, say, 0.7 to 1. Adding a calculation
> to figure out how long the animation should be relative to the current
> opacity would make this just more complicated.
> fadeIn/Out can use opacity values defined in CSS stylesheets, while fadeTo
> requires the user to specify the opacity
>
> My goal for now is to create a plugin, with your help, that can be used
> instead of fadeIn/Out. It would not queue up animations, it would read
> opacity from stylesheets, just like fadeIn/Out do, and it would adjust the
> animation duration relative to the current opacity if a fade is
> stopped/reversed, so that if a fade in is stopped half-way through by a
> fadeout, the fadeout would only take half the specified duration, resulting
> in the same animation speed all the time.
>
> Based on how the plugin ends up, I hope we can port back something to jQuery
> Core to make that available just as easily as fadeIn/Out.
>
> Looking forward to your ideas.
>
> Jörn
>

> --
>
> 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@....
> To unsubscribe from this group, send email to
> jquery-dev%2Bunsubscribe@....
> For more options, visit this group at
> http://groups.google.com/group/jquery-dev?hl=en.
>

--

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@....
To unsubscribe from this group, send email to jquery-dev%2Bunsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

--

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@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

[John Resig]

Absolutely - probably one ticket for each and just link back to this thread.

--John



On Sun, Nov 8, 2009 at 2:34 PM, Jörn Zaefferer
<joern.zaefferer@...> wrote:

> That sounds great. I think in case of my Tooltip plugin there is an
> additional problem, where a mouseover event doesn't happen when the mouse is
> over a tooltip element that still fades out. I may be able to fix that with
> mousemove.
>
> So, if we can get these three fixed and that other issue, the jQuery UI
> Tooltip would be mostly done.
>
> Should I create a ticket for these?
>
> Jörn
>
> On Sun, Nov 8, 2009 at 12:06 PM, John Resig <jeresig@...> wrote:
>>
>> So it seems like a couple things would fix your problems:
>> 1) If fadeIn or fadeOut is called while a partial opacity is shown
>> then animate to the final state, starting from the current opacity
>> (right now fadeIn, in particular, won't run).
>> 2) Make the actual time to run the animation be equal to
>> currentOpacityDiff * timeToRunAnimation (where currentOpacityDiff is a
>> number 0 to 1).
>> 3) Make fadeTo show an element if it's not visible.
>>
>> The only remaining issue is to figure out how the queueing should
>> work. It seems like you would just still need to call .stop() before
>> running any animation.
>>
>> --John
>>
>>
>>
>> On Sun, Nov 8, 2009 at 11:22 AM, Jörn Zaefferer
>> <joern.zaefferer@...> wrote:
>> > Hi,
>> >
>> > I've built a testpage to document this issues with fadeIn/Out:
>> > http://jquery-ui.googlecode.com/svn/branches/labs/fadequeue/index.html
>> >
>> > As written on that page, the issues are:
>> >
>> > Without using stop(), animations just queue up, thats inacceptable
>> > With just using stop(), styles end up in the middle, screwing up the
>> > next
>> > fade, that is, stopping a fadeout half way through will cause the next
>> > fade
>> > in to not fade to 1
>> > Using stop(false, true) will finish the animations, which worksaround
>> > the
>> > above problems, but the result is ugly, as a stopped fadeout will skip
>> > to
>> > the end, then fade in again from 0, instead of just fading in from the
>> > current opacity
>> > The crazy complicated stuff, using a mix of fadeIn/Out and fadeTo, apart
>> > from being way too complicated, has the big drawback that the
>> > fadeTo-animations take exactly as long as the others, while it usually
>> > doesn't fade from 0 to 1, but only from, say, 0.7 to 1. Adding a
>> > calculation
>> > to figure out how long the animation should be relative to the current
>> > opacity would make this just more complicated.
>> > fadeIn/Out can use opacity values defined in CSS stylesheets, while
>> > fadeTo
>> > requires the user to specify the opacity
>> >
>> > My goal for now is to create a plugin, with your help, that can be used
>> > instead of fadeIn/Out. It would not queue up animations, it would read
>> > opacity from stylesheets, just like fadeIn/Out do, and it would adjust
>> > the
>> > animation duration relative to the current opacity if a fade is
>> > stopped/reversed, so that if a fade in is stopped half-way through by a
>> > fadeout, the fadeout would only take half the specified duration,
>> > resulting
>> > in the same animation speed all the time.
>> >
>> > Based on how the plugin ends up, I hope we can port back something to
>> > jQuery
>> > Core to make that available just as easily as fadeIn/Out.
>> >
>> > Looking forward to your ideas.
>> >
>> > Jörn
>> >
>> > --
>> >
>> > 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@....
>> > To unsubscribe from this group, send email to
>> > jquery-dev+unsubscribe@....
>> > For more options, visit this group at
>> > http://groups.google.com/group/jquery-dev?hl=en.
>> >
>>
>> --
>>
>> 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@....
>> To unsubscribe from this group, send email to
>> jquery-dev+unsubscribe@....
>> For more options, visit this group at
>> http://groups.google.com/group/jquery-dev?hl=en.
>>
>>
>
> --
>
> 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@....
> To unsubscribe from this group, send email to
> jquery-dev+unsubscribe@....
> For more options, visit this group at
> http://groups.google.com/group/jquery-dev?hl=en.
>

--

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@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

[Karl Swedberg-2]

Are these issues with fadeIn / fadeOut any different from those with slideUp / slideDown? There is a problem with repeated slide animations causing the height to no longer go to the element's full height if stopped in the middle. Is it possible to have a more generic fix that would deal with other animations as well?

--Karl

On Nov 8, 2009, at 5:22 AM, Jörn Zaefferer wrote:

Hi,

I've built a testpage to document this issues with fadeIn/Out: http://jquery-ui.googlecode.com/svn/branches/labs/fadequeue/index.html

As written on that page, the issues are:

• Without using stop(), animations just queue up, thats inacceptable
• With just using stop(), styles end up in the middle, screwing up the next fade, that is, stopping a fadeout half way through will cause the next fade in to not fade to 1
• Using stop(false, true) will finish the animations, which worksaround the above problems, but the result is ugly, as a stopped fadeout will skip to the end, then fade in again from 0, instead of just fading in from the current opacity
• The crazy complicated stuff, using a mix of fadeIn/Out and fadeTo, apart from being way too complicated, has the big drawback that the fadeTo-animations take exactly as long as the others, while it usually doesn't fade from 0 to 1, but only from, say, 0.7 to 1. Adding a calculation to figure out how long the animation should be relative to the current opacity would make this just more complicated.
• fadeIn/Out can use opacity values defined in CSS stylesheets, while fadeTo requires the user to specify the opacity

My goal for now is to create a plugin, with your help, that can be used instead of fadeIn/Out. It would not queue up animations, it would read opacity from stylesheets, just like fadeIn/Out do, and it would adjust the animation duration relative to the current opacity if a fade is stopped/reversed, so that if a fade in is stopped half-way through by a fadeout, the fadeout would only take half the specified duration, resulting in the same animation speed all the time.

Based on how the plugin ends up, I hope we can port back something to jQuery Core to make that available just as easily as fadeIn/Out.

Looking forward to your ideas.

Jörn

--

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@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

--

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@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

[Jörn Zaefferer-2]

Good point Karl. I think points one and two from John's first reply apply for slideUp/Down as well. I'll wait for John to confirm, then extend my testpage and create tickets for all three issues.

Jörn

On Sun, Nov 8, 2009 at 5:25 PM, Karl Swedberg <karl@...> wrote:

Are these issues with fadeIn / fadeOut any different from those with slideUp / slideDown? There is a problem with repeated slide animations causing the height to no longer go to the element's full height if stopped in the middle. Is it possible to have a more generic fix that would deal with other animations as well?

--Karl

On Nov 8, 2009, at 5:22 AM, Jörn Zaefferer wrote:

Hi,

I've built a testpage to document this issues with fadeIn/Out: http://jquery-ui.googlecode.com/svn/branches/labs/fadequeue/index.html

As written on that page, the issues are:

• Without using stop(), animations just queue up, thats inacceptable
• With just using stop(), styles end up in the middle, screwing up the next fade, that is, stopping a fadeout half way through will cause the next fade in to not fade to 1
• Using stop(false, true) will finish the animations, which worksaround the above problems, but the result is ugly, as a stopped fadeout will skip to the end, then fade in again from 0, instead of just fading in from the current opacity
• The crazy complicated stuff, using a mix of fadeIn/Out and fadeTo, apart from being way too complicated, has the big drawback that the fadeTo-animations take exactly as long as the others, while it usually doesn't fade from 0 to 1, but only from, say, 0.7 to 1. Adding a calculation to figure out how long the animation should be relative to the current opacity would make this just more complicated.
• fadeIn/Out can use opacity values defined in CSS stylesheets, while fadeTo requires the user to specify the opacity

My goal for now is to create a plugin, with your help, that can be used instead of fadeIn/Out. It would not queue up animations, it would read opacity from stylesheets, just like fadeIn/Out do, and it would adjust the animation duration relative to the current opacity if a fade is stopped/reversed, so that if a fade in is stopped half-way through by a fadeout, the fadeout would only take half the specified duration, resulting in the same animation speed all the time.

Based on how the plugin ends up, I hope we can port back something to jQuery Core to make that available just as easily as fadeIn/Out.

Looking forward to your ideas.

Jörn

--

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@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

--

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@....
To unsubscribe from this group, send email to jquery-dev%2Bunsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

--

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@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

[Karl Swedberg-2]

excellent. thanks, Jörn!

--Karl

On Nov 8, 2009, at 12:21 PM, Jörn Zaefferer wrote:

Good point Karl. I think points one and two from John's first reply apply for slideUp/Down as well. I'll wait for John to confirm, then extend my testpage and create tickets for all three issues.

Jörn

On Sun, Nov 8, 2009 at 5:25 PM, Karl Swedberg <karl@...> wrote:

Are these issues with fadeIn / fadeOut any different from those with slideUp / slideDown? There is a problem with repeated slide animations causing the height to no longer go to the element's full height if stopped in the middle. Is it possible to have a more generic fix that would deal with other animations as well?

--Karl

On Nov 8, 2009, at 5:22 AM, Jörn Zaefferer wrote:

Hi,

I've built a testpage to document this issues with fadeIn/Out: http://jquery-ui.googlecode.com/svn/branches/labs/fadequeue/index.html

As written on that page, the issues are:

• Without using stop(), animations just queue up, thats inacceptable
• With just using stop(), styles end up in the middle, screwing up the next fade, that is, stopping a fadeout half way through will cause the next fade in to not fade to 1
• Using stop(false, true) will finish the animations, which worksaround the above problems, but the result is ugly, as a stopped fadeout will skip to the end, then fade in again from 0, instead of just fading in from the current opacity
• The crazy complicated stuff, using a mix of fadeIn/Out and fadeTo, apart from being way too complicated, has the big drawback that the fadeTo-animations take exactly as long as the others, while it usually doesn't fade from 0 to 1, but only from, say, 0.7 to 1. Adding a calculation to figure out how long the animation should be relative to the current opacity would make this just more complicated.
• fadeIn/Out can use opacity values defined in CSS stylesheets, while fadeTo requires the user to specify the opacity

My goal for now is to create a plugin, with your help, that can be used instead of fadeIn/Out. It would not queue up animations, it would read opacity from stylesheets, just like fadeIn/Out do, and it would adjust the animation duration relative to the current opacity if a fade is stopped/reversed, so that if a fade in is stopped half-way through by a fadeout, the fadeout would only take half the specified duration, resulting in the same animation speed all the time.

Based on how the plugin ends up, I hope we can port back something to jQuery Core to make that available just as easily as fadeIn/Out.

Looking forward to your ideas.

Jörn

--

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@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

--

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@....
To unsubscribe from this group, send email to jquery-dev%2Bunsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

--

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@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

--

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@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

[Phil Dokas]

On Nov 8, 2009, at 11:25 AM, Karl Swedberg wrote:

> Are these issues with fadeIn / fadeOut any different from those with  
> slideUp / slideDown? There is a problem with repeated slide  
> animations causing the height to no longer go to the element's full  
> height if stopped in the middle. Is it possible to have a more  
> generic fix that would deal with other animations as well?

Yeah, the problem as described for fadeIn/fadeOut is almost exactly  
the same that slideUp/Down suffer from. You need to disable the queue  
(or I suppose you could just empty it manually) and pair it with  
manually animating to 0/remembered values for padding/height to get a  
smooth animation style without queue backup.

I recently worked my way around this issue by using the technique  
described under item #4 at <http://blog.themeforest.net/tutorials/7-things-i-wish-i-had-known-about-jquery/ 
 > with a custom built .animate() setup recently while making the  
menus on <http://chryslerllc.com>.

$('#cllc_corp_header ul.menu > li').each(function() {
        var menu = $(this).find('ul:first');
        $(this).data('menu_size', {
                'padding_top': menu.css('padding-top'),
                'height': menu.height(),
                'padding_bottom': menu.css('padding-bottom')
        });
})
.hover(function(e) {
        var menu_size = $(this).data('menu_size');
       
        $(this).find('ul').stop().css('height', 0).show().animate({
                'padding-top': menu_size.padding_top,
                'height': menu_size.height,
                'padding-bottom': menu_size.padding_bottom
        }, {queue: false, duration: 200});
}, function(e) {
        $(this).find('ul').animate({
                'padding-top': 0,
                'height': 0,
                'padding-bottom': 0
        }, {queue: false, duration: 200, complete: function() {
                $(this).hide();
        }});
});

<http://www.chryslergroupllc.com/js/cllc.core.js>

--
Phil Dokas -//- phil@...

--

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@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.