【问题标题】：Jquery fadeIn not appearing to happenJquery fadeIn 似乎没有发生
【发布时间】：2014-01-22 20:52:44
【问题描述】：

我做了这个最小的测试jsfiddle 来显示图像并使用缩略图导航，下一个和上一个，也可以作为幻灯片运行。

它似乎工作正常，除了我无法在下一张图像的淡入之前让当前显示的图像淡出。

最初，所有图像都放在#holder DIV 的堆栈中，然后 FadeIn 和 FadeOut 按我的预期工作，但我需要将图像放入数组并根据需要加载，因为会有几个不同的值，与每张图片相关联。

我可能犯了一些根本性的错误，或者我不明白 FadeIn 和 FadeOut 是如何正常工作的，因为我不是 javascript 和 jquery 方面的专家，我只是通过查看此处和类似网站上的示例来解决问题。

我怀疑我可能需要在加载下一张图片之前以某种方式强制延迟，但我不知道该怎么做。

谢谢

<style type='text/css'>
    #holder { position: absolute; top: 100px; background-color:#CCCCCC;
    width: 300px; height: 200px;
}
.slides { position: relative; top: 0px;
    display: none;
}
#thumbs li
{
display: inline;
list-style-type: none;
padding-right: 6px;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
// define Global Vars

var timerON = null;

var files = [
    ["http://dummyimage.com/300x200/000/fff&text=Array-01", "http://dummyimage.com/40x40/000/fff&text=01","Title-01"] ,
    ["http://dummyimage.com/300x200/000/fff&text=Array-02", "http://dummyimage.com/40x40/000/fff&text=02","Title-02"] ,          
    ["http://dummyimage.com/300x200/000/fff&text=Array-03", "http://dummyimage.com/40x40/000/fff&text=03","Title-03"] ,
    ["http://dummyimage.com/300x200/000/fff&text=Array-04", "http://dummyimage.com/40x40/000/fff&text=04","Title-04"] ,          
    ["http://dummyimage.com/300x200/000/fff&text=Array-05", "http://dummyimage.com/40x40/000/fff&text=05","Title-05"] ,
    ["http://dummyimage.com/300x200/000/fff&text=Array-06", "http://dummyimage.com/40x40/000/fff&text=06","Title-06"] ,          
    ["http://dummyimage.com/300x200/000/fff&text=Array-07", "http://dummyimage.com/40x40/000/fff&text=07","Title-07"]
    ]
var numImages = files.length;

// initial routines
showImage(1);
buildThumbs();

function showImage(num) {
    //$('#holder img').fadeOut();
    if ( $('#holder img').length > 0 ) { // fadeout existing
        $("#holder img").fadeOut(700);
        //alert("Faded OUT");

    }
    $("#holder").html('<img id="' + num + '" src="' + files[num-1][0] + '" style="display:none;"' + '" />');
    $("#holder img").fadeIn(700);
    //alert("Faded IN");

}

function buildThumbs() {
    var thumbs = "";
    for (cnt=0; cnt<files.length; cnt++) {
        thumbs += '<li><a href="#" id="' + (cnt + 1) + '"><img src="' + files[cnt][1] + '" /></li>';
    }
    $('#thumbs').html(thumbs);
}

// Initialise routines for acting on click events
$(document).ready(function() {


    $('#prev').click( function () {
        var currImage = parseInt($('#holder img:visible').attr("id"));
        if (currImage == 1) {
             // at first position   
        }
        else {
                showImage(currImage-1);        }
    });

    $('#next').click( function () {
        var currImage = parseInt($('#holder img:visible').attr("id"));
        if (currImage == numImages) {
            // at last position
        }
        else {
            showImage(currImage+1);
        }
    });


    $('#thumbs a').click( function () {
        var selImage = parseInt($(this).attr('id'));
        var currImage = parseInt($('#holder img:visible').attr("id"));
        showImage(selImage);

    });

    $('#slideShowBtn').click( function () {
       slideShowCheck();

    });

});


function slideShowCheck() {
    if(timerON != null) {
        clearTimeout(timerON);
        timerON = null;
        $('#slideShowBtn').text('Play Slideshow');
   } else {
        $('#slideShowBtn').text('Stop Slideshow');
        slideShow();
    }
}

function slideShow() {

        var nextImage = 0;
        var currImage = parseInt($('#holder img:visible').attr("id"));
        if (currImage == numImages) {
            nextImage = 1;
        } else {
            nextImage = currImage + 1;                     
        }
        showImage(nextImage);
        timerON = setTimeout(slideShow, 3000);

}
});//]]>  

</script>


</head>
<body>
  <p>
    <button id="prev">&laquo; Prev</button>
    <button id="next">Next &raquo;</button>
</p>
<ul id="thumbs">

</ul>
<p>
    <button id="slideShowBtn">Play Slideshow</button>
</p>
<div id="holder">
</div>
<div style="clear:both;"></div>

<ul id="thumbs2">

</ul>

</body>


</html>

【问题讨论】：

标签： javascript jquery fadein

【解决方案1】：

回调、回调、回调。

JS 做了很多异步的事情，所以你需要在淡入淡出上使用回调。

$(ITEM1).fadeOut("fast", function() {
    alert("all the way faded out");
    $(ITEM2).fadeIn("fast");
});

这是你的fixed fiddle。

【讨论】：

另外，您需要确保在将 item2 淡入之前加载图像。
就是这么简单。我想我需要了解回调，我会按照建议检查是否已加载
很抱歉，因为声望不能投票，也不能和以前的账号合并，这个账号有100+的声望