CODEWITHSUNDEEP
jquerycss
Louis93
Louis93

Reputation: 3923

When I hide some div elements, and fadeIn other div elements in their place, the divs fading in appear to "jump"?

The action I am talking about can be recreated here.

Search for a video using the search bar and then hit the Play button down below. You will see that the player "jumps" up to collect its spot.

How do I resolve that behaviour such that it smoothly fades in at that location?

The following is the code that is run to perform the toggle:

    /*The elements that get hidden are below*/
    $("#playlist").css('display','none');
    $("#button_control").hide();
    $("#search-group").hide();
    $("#playlist_container").hide();

    /*The element that becomes visible (AND JUMPS!) below*/
    $("#player-list_container").fadeIn(1000);

Upvotes: 0

Views: 37

Answers (2)

Gesior.pl
Gesior.pl

Reputation: 106

Try to make that element invisible by using CSS 'visibility' - 'hidden', not 'display' - 'none'. It will make that element invisible, but element will stay on it's place.

Upvotes: 2

CRABOLO
CRABOLO

Reputation: 8793

Try adding a delay, so that it has time for the other elements to get out of the way, thus appearing in the right spot.

$("#player-list_container").delay(1000).fadeIn(1000);

Upvotes: 1

Related Questions