CODEWITHSUNDEEP
javascriptjquery
Gavin
Gavin

Reputation: 7976

jQuery fadeIn doesn't work, fadeTo works

I keep having issues with fading in an element after appending it to a parent.

Here's some example code I threw together: (http://jsfiddle.net/XCKJf/)

// test with fadeTo and fadeIn
var wrap1 = $('<div>Wrap 1</div>');
wrap1.appendTo('#container');
wrap1.fadeTo(0, 0).fadeIn();

// test with fadeTo and fadeTo - WORKS
var wrap2 = $('<div>Wrap 2</div>');
wrap2.appendTo('#container');
wrap2.fadeTo(0, 0).fadeTo(500, 1);

// test with css opacity and fadeIn
var wrap3 = $('<div>Wrap 3</div>');
wrap3.appendTo('#container');
wrap3.css('opacity', 0).fadeIn();

// test with css opacity and fadeTo - WORKS
var wrap4 = $('<div>Wrap 4</div>');
wrap4.appendTo('#container');
wrap4.css('opacity', 0).fadeTo(500, 1);

wrap2 and wrap4 fade in correctly, because they use fadeTo(). wrap1 and wrap3 do not fade in. There are no errors thrown.

Obviously I can just keep using fadeTo, but as far as I know all 4 of these elements should fade in, so I really would like know why it's behaving this way.

Can someone shed some light on this?

Upvotes: 2

Views: 2541

Answers (2)

maverickosama92
maverickosama92

Reputation: 2725

try this:

// test with fadeTo and fadeIn

var $container = $('#container');

var wrap1 = $('<div>Wrap 1</div>');
wrap1.fadeIn(1500).appendTo($container);

// test with fadeTo and fadeTo
var wrap2 = $('<div>Wrap 2</div>');
wrap2.fadeIn(2000).appendTo($container);

// test with css opacity and fadeIn
var wrap3 = $('<div>Wrap 3</div>');
wrap3.fadeIn(2500).appendTo($container);

// test with css opacity and fadeTo
var wrap4 = $('<div>Wrap 4</div>');
wrap4.fadeIn(3000).appendTo($container);

working fiddle here: http://jsfiddle.net/XCKJf/4/

I hope it helps.

Upvotes: 1

Felipe Skinner
Felipe Skinner

Reputation: 16636

What FadeTo does is adding a style setting its opacity to 0.

What FadeIn does is removing any style with "display: none".

So you can't show something with FadeIn that has been "hidden" with FadeTo. You could use FadeOut on the other hand since its implementation is the opposite of FadeIn putting the "display: none" on the style for you.

Upvotes: 1

Related Questions