回调，回调，回调。

Question

我已经做了这个最小化测试jsfiddle来显示图像并使用缩略图导航，下一个和上一个，并以幻灯片形式运行。

似乎工作正常，但我无法在下一张图像的淡入淡出之前将当前显示的图像显示为fadeOut。

最初所有的图像都放在#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>

Answer 1

回调，回调，回调。

JS确实有很多异步，所以你需要在fadein上使用回调。

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

Jquery fadeIn似乎没有发生

1 个答案:

回调，回调，回调。

这是你的fixed fiddle。