jQuery fadeOut和fadeIn不在现场工作,fadeOut / fadeIn比我的实际图片更快可以改变

时间:2016-11-19 21:18:20

标签: javascript jquery

我用这个脚本创建了这个简单的网站......

    <script type="text/javascript">
    var photos = ["indexphotos/1.jpg", "indexphotos/2.jpg", "indexphotos/3.jpg", "indexphotos/4.jpg",
            "indexphotos/5.jpg"];
    var currentPhoto = 1;
    setInterval(function(){
        $('#content img').fadeOut(400, function() {
            if(currentPhoto == 5) {
                currentPhoto = 0;
            }
            $('#content img').attr("src",photos[currentPhoto]);
            currentPhoto++;
            $('#content img').fadeIn(400);
        });
    },5000);
</script>

播放幻灯片,播放和淡出5张照片中的照片。当我在本地开发它时它工作正常,但现在当它在服务器上运行时它正在打嗝。它会逐渐淡出然后回到相同的图片,然后最终切换到新的图片,即使它想要在图片淡入之前切换到图片。就像fadein和fadeout比实际更改图片更快。

如果您刷新页面一次,它可以正常工作。

有没有办法更好地做到这一点,所以这不会发生?

1 个答案:

答案 0 :(得分:0)

尝试为图片添加onload处理程序,只有在加载图片后才会淡入(更改src后)

$("#content img").one("load", function() {
    $(this).fadeIn(); //fade in after loading image
}).attr("src", whatever); //change ti another image

PS。 .one在这里不是一个错字。