Jquery Append - Image Inline

I'm trying to add images to a div. When the images append. The are displaying 'block'. I need them to display inline. This is the code I am running: $('.showvideothumbs').append(

Solution 1:

Use callback.

$(".showvideothumbs").append('<img src="/garageimages/'+data.thumb+'" style="display:none;"/>').find('img').fadeIn(2000,function(){
    $(this).css('display', 'inline');
});

Solution 2:

Instead of inline style try

.css('display', 'inline')

Solution 3:

I'm a little confused as to why you are doing this:

$('<img src="/garageimages/'+data.thumb+'" style="display:inline">').hide().fadeIn(2000)

You are, in effect, creating an image and then hiding and showing it before it is even added to the DOM.

Does setting the style using .css('display', 'inline') work more effectively for you?

$(".showvideothumbs").append($('<img src="/garageimages/'+data.thumb+'" style="display:inline">').css('display', 'inline'));

You can then apply the hide/fade to the containing DIV (formatted for greater ease of reading):

$(".showvideothumbs")
    .append($('<img src="/garageimages/'+data.thumb+'" style="display:inline">')
         .css('display', 'inline'))
    .hide().fadeIn(2000);