jquery prepend + fadeIn
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!
Solution 1:
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.
Solution 2:
+1 to cletus, but I just wanted to highlight the other way you could do it.
$('#be-images ul').prepend(
$(response).hide().fadeIn('slow')
);
Solution 3:
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