Comments on: Play School: Broken Repeating Animations

By: Luke Dorny

Luke Dorny — Wed, 14 Apr 2010 18:59:34 +0000

Very cool. Still haven’t stepped into the jq pool of magic, so hopefully your site will help. Thanks, Rem.

By: Peter Collins

Peter Collins — Mon, 26 Oct 2009 17:37:07 +0000

Wonderfully easy to understand tutorial. The first one I've used for jQuery where I understood it and was able to implement it to the code I had to stop a small but annoying quirk.

Thank you, I very much appreciate the work you've put into the video.

By: Ben

Ben — Wed, 02 Sep 2009 08:45:15 +0000

Hi, just wanted to report a typo: You wrote “…use fadeIn(speed, opacity) so…” but judging from your subsequent code and the jQuery docs I think you meant “fadeTo” in that sentence. Anyway, thanks for the straightforward example of how to fix this problem!

By: Foamcow

Foamcow — Wed, 19 Aug 2009 10:45:24 +0000

So simple, yet easy to overlook.

I just fixed a little gallery rollover script that I made and it's now about 95% less annoying!

Thanks Remy!

By: LuK

LuK — Wed, 05 Aug 2009 20:17:18 +0000

lol @mubs,

the first thing I thought was exactly your comment...I've had the same problem with a project and also found the .stop() method, but it wasn't that beautiful as it looks, the problem is, that the animation gets stopped right at the point the other starts, even when it's not finished, that leads to a "staggering" effect or even no effect at all, so I wanted something that ends the running animation (1 whole circle) and allows then another one...so I found the hoverFlow (Link see above) Plugin and was very pleased with it, it's some kind of extended animation function and you just replace any .animate() with .hoverFlow(e.type, { css: "value", css: "value" }, speed, easing); and you're done...I like it a lot and it does just what it's supposed to...I indeed hat a problem that I couldn't solve with this one, and also stop didn't what I expected from it =)...

I have the following function:

             jQuery.fn.slideFadeToggle = function(settings) {
                 settings = jQuery.extend({
                    speed:700,
                    easing : "swing"
                }, settings)
                
                caller = this
                if($(caller).css("display") === "none"){
                    $(caller).animate({
                        height: 'toggle'
                    }, settings.speed, settings.easing);
                    $(caller).animate({
                        opacity: 1
                    }, settings.speed, settings.easing);
                }else{
                    $(caller).animate({
                        opacity: 0
                    }, settings.speed, settings.easing);
                    $(caller).animate({
                        height: 'toggle'
                    }, settings.speed, settings.easing);
                }
            };

the whole thing is linked to an a-tag like this:

            $("#slider-button").click(function(){
                $("#formfield-container").slideFadeToggle()
            });

the point is, I would like to have the same "make one complete animation cycle"-effect like on the hover things I do with .hoverFlow but in this case I couldn't make it run, maybe because I don't know where exactly to pass this function(e) from the hoverFlow Plugin...just in case somebody may know a solution to this =)....

thx in advance and thank you for the nice Screencasts!

By: Stefan

Stefan — Wed, 05 Aug 2009 08:47:08 +0000

Thank you very much for this, very helpful to me as I have just started learning jQuery. More please :-)

By: mubs

mubs — Mon, 27 Jul 2009 22:38:18 +0000

The jQuery hoverFlow plugin (http://www.2meter3.de/code/hoverFlow/) was created for exactly this.

By: Nic

Nic — Sat, 25 Jul 2009 19:14:01 +0000

Great screencast, thanks!

By: Michael Kozakewich

Michael Kozakewich — Sat, 25 Jul 2009 18:25:28 +0000

Just because of that, I've been eschewing fadeIn and fadeOut in favour .animate({opacity:"1"},{queue:false, duration:200})

fadeTo sounds better, though. Basically, I'm just doing .stop().fadeTo(200,1).

By: Nicolaj Kirkgaard Nielsen

Nicolaj Kirkgaard Nielsen — Sat, 25 Jul 2009 09:18:09 +0000

Stugoo, I was thinking the same thing. I like the backward compatibility of your approach.

Remy, thanks for the tutorial. I'm fascinated by the autocomplete when you wrote the "opacity: 0;" instruction. How did you set that up and do you have any more autocomplete snippets you could share?