CODEWITHSUNDEEP
jqueryjquery-ui
w3father
w3father

Reputation: 569

How to use fade in jquery for prepend?

I want to use fade in effect for my prepend function.

I have tried follow one but it is not working.

$('#iq').prepend('.....').fadeIn('slow')

Upvotes: 4

Views: 7592

Answers (4)

Swen
Swen

Reputation: 124

Problem: You have many div created new with prepend Solution: Add first new div with display:none and a class after prepend call class to get visible.

$('#putin').prepend('<div id="test" class="5" style="display:none">test1</div>');
$('.5').slideDown('slow');

fiddle

Upvotes: 0

Loktar
Loktar

Reputation: 35309

Try the example below.

$('#test').prepend($('<div id="bob">Hi der</div>').fadeIn('slow'));

Live Demo

Since you are just fading in the elements you are prepending just do it within the prepend as you add them, this also has the benefit of not forcing you to hide them first.

Upvotes: 8

T.J. Crowder
T.J. Crowder

Reputation: 1074829

prepend returns the elements in the object you call it on, not the new elements, so you're calling fadeIn on the elements you're pre-pending the new content to. Instead, you want prependTo, which is basically prepend the other way 'round. (See the docs for details.) Also, you need to hide the new elements before fading them in, so:

$('.......').prependTo('#iq').hide().fadeIn('slow');

Live example

Upvotes: 6

Matt Ball
Matt Ball

Reputation: 359956

The element needs to be hidden first:

$('#iq').hide().prepend('.....').fadeIn('slow');

Upvotes: 2

Related Questions