fade from one image to another on div reload

Asked Dec 04 '17 at 21:41

Active Dec 04 '17 at 22:26

Viewed 36 times

I am running a python bottle web server for a python script that is generating new data and I am using the web interface for the front end. I have several divs on my front end page that I have set to refresh periodically. Eg.:

<script>
function autoRefresh_z()
{
     $("#z_div").load("z_div.tpl.html");
 }
 setInterval('autoRefresh_z()', 1000);
            </script>
<script>$(document).ready(function() {$("#z_div").load("z_div.tpl.html")})</script>

makes the <div class="col-md-8" id="z_div"></div> refresh every second.

This works well for changes in text (and I update a progress bar this way) but where I want to include a changing image, it flickers on the reload as the new image is loaded. Is there a straightforward way with javascript to reload this div but fade from one image to the next?

EDIT: Conventional fade seems to go from image --> white --> image (at least how I have it). I would like to go image --> image. Is this possible?

edited Dec 04 '17 at 22:26

asked Dec 04 '17 at 21:41

Nick

there is, you need to include `fade` in order to change one image to another – ZombieChowder Dec 04 '17 at 21:43
Possible duplicate of [jQuery .load() with fadeIn effect](https://stackoverflow.com/questions/9337220/jquery-load-with-fadein-effect) – Obsidian Age Dec 04 '17 at 21:46

fade from one image to another on div reload

0 Answers0