setTimeOut jquery problem

Question

i would like to scroll the window to the top, pause my animation for 1 second, and then use a fadeOut to erase the content, but this code doesn't work, do you know why?

$('#link').bind('click', function(){
    preloading.show();

    $('html,body').animate({'scrollTop':0}, 300, function(){
        $('#myDiv').setTimeout(function(){
            $(this).empty()
                .append(conteneurBio).hide()
                .fadeIn('slow', function(){
                    preloading.hide();
                });
        }, 1000);
});

My suspicious nature begs me to put a console.log(this) in the setTimout() callback, just to make sure it is what I think it is. — Elf Sternberg
– Elf Sternberg, Commented Sep 1, 2011 at 23:38
@kingjiv : thanks guys for your answers, kingjiv there was a bug the new content didn't appear inside the div. Tomm's answer works fine. Thanks anyway — Paul
– Paul, Commented Sep 2, 2011 at 12:32

Tomm · Accepted Answer · 2011-09-01 23:43:05Z

2

Wouldn't this work too?

$('html,body').animate({'scrollTop':0}, 300, function() {
        $('#myDiv')
             .empty()
             .hide()
             .append(conteneurBio)             
             .delay(1000)
             .fadeIn('slow', function() { preloading.hide(); }
    });

answered Sep 1, 2011 at 23:43

Tomm

2,1421 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jfriend00 Over a year ago

+1 This one looks like the only solution that has a chance at actually working.

Paul Over a year ago

@Tomm : thanks Tomm, it works really fine, i tried it at first but i guess i missed something. Last thing, i'd like to use a fadeOut() before the empty() method, i tried to put it just before empty() but the result is (in that order) : empty() / fadeIn() / fadeOut() then another fadeIn() ... ? any idea? Thanks

Joseph Silber · Accepted Answer · 2011-09-02 02:16:46Z

2

You're missing one set of closing });s:

$('#link').bind('click', function(){
    preloading.show();

    $('html,body').animate({'scrollTop':0}, 300, function()
    {
        setTimeout(function(){
            $('#myDiv').empty()
                .append(conteneurBio).hide()
                .fadeIn('slow', function(){
                    preloading.hide();
                });
        }, 1000);
    });
});

edited Sep 2, 2011 at 2:16

answered Sep 1, 2011 at 23:36

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

7 Comments

jfriend00 Over a year ago

-1 This code wouldn't work either for a couple reasons. setTimeout isn't a jQuery method and this is is set to the window object when setTimeout fires so you can't use it inside the setTimeout function to refer to some previous DOM or jQuery object. The OP really needs to be looking at javascript errors in the error console.

Joseph Silber Over a year ago

@jfriend00: Can you explain in more detail? Seems to be working for me: jsfiddle.net/HMJEn

jfriend00 Over a year ago

Yes, local variables like the one in your jsFiddle are available inside the setTimeout, but NOT 'this. That is reset by the javascript engine before invoking the setTimeout callback. See this jsFiddle for an example: jsfiddle.net/jfriend00/akxuz.

Joseph Silber Over a year ago

@jfriend00: You're right. I completely glossed over the fact that he was using $(this). I updated my code. Thanks.

jfriend00 Over a year ago

I still like Tomm's method below that uses .delay() instead of setTimeout, and you seem to have dropped the $('#myDiv') reference which I think was relevant, but you're on a better track now.

|

flamer.ohr · Accepted Answer · 2011-09-01 23:41:12Z

0

used something like: http://jsbeautifier.org/ it helps you find any missing brackets/braces in your javascript, especially when you don't have an editor that does the indentation for you.

Joseph posted before me with the correct answer though, you're missing a "});" at the end

answered Sep 1, 2011 at 23:41

flamer.ohr

1114 bronze badges

Collectives™ on Stack Overflow

setTimeOut jquery problem

3 Answers 3

2 Comments

7 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

7 Comments

Comments

Related