CODEWITHSUNDEEP
jquery
Ben Finkel
Ben Finkel

Reputation: 4803

jQuery fade-in text wraps at first then squishes up during transition

Sorry, I know it's not a great Title description but the effect is difficult to describe and sort of needs to be observed. See the jsFiddle below.

http://jsfiddle.net/eus5R/

    $(document).ready(function(){
        var speed = 2500;
        $("div#leftPane p").hide();

        $("div#leftPane").click(function() {
            $("div#leftPane p").each(function() {
                if ($(this).is(":hidden")) {
                    $(this).show(speed);
                    exit();
                }
            });                           
        });
    });

Basically, I have a bunch of p's that start hidden and I want to reveal one at a time by mouse click. I want the reveal to take a half-second, fading the text in. The problem is that during the fade-in transition, the text juggles around as the browser tries to render it properly. How can I avoid that "juggling" and just have it fade-in already rendered as it will finally be shown?

Thanks!

Upvotes: 2

Views: 98

Answers (2)

Yuriy Galanter
Yuriy Galanter

Reputation: 39777

Instead of show and hide use fadeOut and fadeIn:

$(document).ready(function(){
            var speed = 2500;
            $("div#leftPane p").fadeOut(0);

            $("div#leftPane").click(function() {
                $("div#leftPane p").each(function() {
                    if ($(this).is(":hidden")) {
                        $(this).fadeIn(speed);
                        return false;
                    }
                });                           
            });
        });

http://jsfiddle.net/eus5R/2/

Oh and instead of non-existant exit() which breaks the each because it throws an exception, do a return false

Upvotes: 1

James Montagne
James Montagne

Reputation: 78690

Using show with a duration animates the width as well. The smaller width causes the text to wrap. You can use slideDown instead:

http://jsfiddle.net/eus5R/3/

Upvotes: 3

Related Questions