Noob problem with jQuery: Element height jumps when content fadeOut <-> fadeIn

[Arde]

How to get rid of this jumping effect?

Here is the code:

link-1


link-2


link-3












Name: First name


url: First url


Name: Second name


url: Second url


Name: Third name


url: Third url




 



 

[soap]

Do you have a live example?

[Arde]

Live example

[soap]

Why don’t you try this? I have no way of testing it right now.

$('.nav-link1').click(function() {

$('.link3').fadeOut('fast');

$('.link2').fadeOut('fast');

$('.link1').queue(function() {

$(this).fadeIn(700);

$(this).dequeue();

});

});

Try that one and let me know how it works. I’ve never really dealth with queues much in this way so not sure.

Or you could just set time intervals.

[noahgelman]

Its because you’re fading something in and out at the same time. So in the middle of the fade, you have 2 elements there, which is why you have the jump. It’s making room for both. What you need to do is fade out the old element THEN fade in the new element. You have to chain the fades one after the next instead of doing both at the same time.

[noahgelman]

It would be like:

$('.nav-link1').click(function() {

$('.link2, .link3').fadeOut(fast, function () {

$('.link1').fadeIn(700);

});

});

That should do it.

[mslemeri]

Chris actually describes a solution in an unrelated video (starts at 26:30) to this issue in jQuery (which I have all the time).

[Arde]

@soap: It still behaves the same. You can see it in here: With Queue

@noahgelman: Thanks for the explanation. I I tried your solution but It too behaves still the same. You can see it in here. With Chain

@mslemeri: I didn’t understand 100% that solution in the video. Thanks for linking that one, it was really helpful and solved some other proplems for me.

Still hoping to get this work somehow.

[noahgelman]

Hmm….. curious. It should work like how I wrote it.
Although, for some reason you ahve a function inside a function for no reason. You should probably get rid of that.

[Arde]

@noahgelman: Could you be more specific what you mean by function inside a function? I’m a noob and just started to learn this jQuery witchcraft.

[webarnes]

My first thought would be a css bug.
Your call to css/style.css is not hitting a style sheet. (at least for me)
Only local styles are present.

Also You are utilizing HTML 5 elements without enabling them.
I do not see any call to modernizer or html5 shiv.
Very well could cause a visual tick.

Just for the heck of it change
background: none repeat scroll 0 0 #000000;

to:
background: #000;

Regards,
William

[Arde]

I finally fixed this tiny proplem. jQuery part where ok in the first place, just added separate ul for every link class and gave them a fixed position.

Thanks to everyone for your comments :)

Here are the fixed parts:

Name: First name


url: First url








Name: Second name


url: Second url








Name: Third name


url: Third url




 

This added to css

.link1, .link2, .link3 {position: fixed; right: 40px;}

[Author]

Posts