There is a function that should display photos on the page when added to a folder

function AddPhoto() { $.ajax({ url: 'private/add_photo.php', method: 'POST', data: {'echoImag':FILE_LIST}, beforeSend: function() { inProgress = true; } }).done(function(data){ data = jQuery.parseJSON(data); FILE_LIST = JSON.stringify(data['allImages']); if (data['newImages'].length > 0) { for (i=0; i<data['newImages'].length; i++) { if ((data['newImages'][i] != '.') && (data['newImages'][i] != '..')) { html += "<img src='"+dir+data['newImages'][i]+"' alt='' class='img-thumbnail' style='display:none;'>"; } } html = html.trim(); $(html).prependTo(".container").fadeIn(); //$(".container").prepend(html); html = ''; } inProgress = false; });

Everything works great, except for animation. Those. The photo appears, then disappears and then appears with an animation effect. And no matter how long I put everything happens at the same speed (the animation effect is also not important).

How to make the right animation?

    2 answers 2

     $(html).prependTo(".container").fadeIn();

    Try changing the duration of the animation .fadeIn(3000) , where 3000 values ​​in ms.

      I think it would be correct to attach the animation of the appearance of the picture, making sure that it is loaded. If we start the animation before the picture is loaded, we risk an unpredictable result. Therefore, use the onLoad event handler to animate the loaded image.

       image = $("<img src='"+dir+data['newImages'][i]+"' alt='' class='img-thumbnail' style='display:none;'>";) image.load(function(){ $(this).fadeIn(2000) })

      Working example:

       function AddPhoto() { for (i = 0; i < 3; i++) { image = $("<img src='" + "https://placeimg.com/200/20"+i+"/arch" + "' alt='' class='img-thumbnail' style='display:none;'>"); image.load(function(){ $(this).fadeIn(2000) }) $(".container").prepend(image); } } AddPhoto() 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"></div>