CODEWITHSUNDEEP
javascriptjquery
Jason Small
Jason Small

Reputation: 1054

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($('<img src="/garageimages/'+data.thumb+'" style="display:inline">').hide().fadeIn(2000));

I've tried wrapping it in a div that has "display:inline" set, but jquery changes that to "display:block".

Upvotes: 0

Views: 5476

Answers (3)

Darm
Darm

Reputation: 5659

Use callback.

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

Upvotes: 1

Mutation Person
Mutation Person

Reputation: 30498

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);

Upvotes: 0

Viller
Viller

Reputation: 540

Instead of inline style try 

.css('display', 'inline')

Upvotes: 0

Related Questions