Javascript 替换Phonegap上DIV中的图像

我正在PhoneGap中编写应用程序，需要创建一个函数：

单击“播放”按钮后，DIV中会出现一个图像，3秒钟后会自动更改为另一个图像

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

不幸的是，我的应用程序等待了3秒钟并显示了第二张我没有看到的动画效果。睡眠是另一个等待3000毫秒的函数：

这是因为.css'display'、'block'或.css'display'、'none'没有动画

---

使用。

让代码等待3000毫秒绝非好主意，最好使用setTimeoutfunction{$'.cw1a'.css'display'，none'；$'.cw1b'.css'display'，block'，3000；

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