jquery prepend + fadeIn

Question

I have this code:

$.ajax({
        url : url,
        data : {ids : JSON.stringify(jsonids), hotel_id: hotel_id},
        success : function(response)
        {
            $('#be-images ul').prepend(response).fadeIn('slow');
        },
        dataType: 'html'
    });

but the fade In does not work...I want the content to be prepended and faded in...how will I do this?

Thanks in advance!

score 111 · Accepted Answer · answered Dec 15 '09 at 08:55

111

Assuming response is HTML then try this:

$(response).hide().prependTo("#be-images ul").fadeIn("slow");

When you do it this way:

$('#be-images ul').prepend(response).fadeIn('slow');

the thing you're actually fading in is the result of the initial selector (the list at the front), which is already visible.

answered Dec 15 '09 at 08:55

cletus

616,129
168
910
942

both cletus and nick, your ways are awesome.. i stumbled upon the same problem and both of your ways work like a breeze... thanks... – coder101 Feb 11 '13 at 14:12
@cletus : I've same problem but my data is json array. I uses .each function and trying to prepend but it doesn't show any data prepending - `var li = '
'+item.img+'

Vilas

Jun 07 '16 at 05:10

score 42 · Answer 2 · answered Dec 15 '09 at 13:31

42

+1 to cletus, but I just wanted to highlight the other way you could do it.

$('#be-images ul').prepend(
    $(response).hide().fadeIn('slow')
);

answered Dec 15 '09 at 13:31

nickf

537,072
198
649
721

this works well cause it doesn't hide the element to prepend to, only the element being prepended – lukeaus Oct 24 '16 at 18:00

Abhishek · Answer 3 · 2017-11-02T15:33:18.757

1

Try this: HTML

<button>Add</button>
<div id="data"></div>

Jquery:

$('button').click(function() {
  $('#data').prepend('<div class="item">Test</div>'"');
    $("#data .item:first-child").hide();
   $("#data .item:first-child").fadeIn();
});

Live Demo: jsfiddle

edited Nov 02 '17 at 15:33

answered Nov 02 '17 at 15:27

Abhishek

968
10
16

jquery prepend + fadeIn

3 Answers3

Linked