Replace image in DIV on Phonegap

Question

I am writing an application in PhoneGap and I need to create a function:

After clicking on the PLAY button, in the DIV appears one image and after 3 seconds it automatically changes to another image.

<div id="imgtrening">
      <div class="cw1a" style="display: none" ><img style="width:100%"; src="images/cw1a.jpg" alt=""></div>
      <div class="cw1b" style="display: none" ><img style="width:100%"; src="images/cw1b.jpg" alt=""></div>
</div>

And after clicking to the button id="play":

document.getElementById('play').onclick = function() {
     $('.cw1a').css('display', 'block')
     sleep(3000);
     $('.cw1a').css('display', 'none')
     $('.cw1b').css('display', 'block')
};

Unfortunately, my application waits 3 seconds and shows the second image (I do not see animation effect) (sleep is another function waiting 3000 milliseconds) :(

Answer 1

That's because .css('display', 'block') or .css('display', 'none') doesn't animate.

Use .animate() .