CODEWITHSUNDEEP
jqueryfadein
Gavin
Gavin

Reputation: 6394

jQuery fadeIn/fadeOut causes page to jump

I am using jCarousel to create a scrolling tour for my visitors and part of this tour, is to update a header tag with some text each time the user moves from one slide to another.

It seems, that when calling the following code, it causes the page to jump by about 16px even though I have wrapped the element (that I am fading in and out) in another element with a fixed height.

if(state != 'init' && $('#user-tour h1').html() != $(li).find('img').attr('alt'))
{
    $('#user-tour h1').fadeOut(100, function()
    {
    $('#user-tour h1').html($(li).find('img').attr('alt')).fadeIn(100);
    });
}

#user-tour is wrapped inside a div with a height set. I have confirmed this by using javascript to then toggle #user-tours visibility and the page does not shift.

I have also hooked the resize and scroll events for window, document, #user-tour div.h1 and #user-tour div.h1 h1 and the only events that fired when this problem happened was the scroll event.

Does anyone have any idea's why this could be happening?

Cheers

Gavin

Upvotes: 0

Views: 662

Answers (1)

Kevin B
Kevin B

Reputation: 95031

I suggest trying fadeTo().

.fadeTo(100,0,function(){
    ....fadeTo(100,1);
})

Upvotes: 1

Related Questions