Javascript Jquery fadeIn似乎没有发生_Javascript_Jquery_Fadein

Javascript Jquery fadeIn似乎没有发生

javascript jquery

Javascript Jquery fadeIn似乎没有发生,javascript,jquery,fadein,Javascript,Jquery,Fadein,我做了这个最小的测试，以显示图像和导航缩略图，下一个和上一个，也作为幻灯片运行它似乎工作正常，除了我不能让当前显示的图像在下一幅图像淡出之前淡出最初，所有图像都放在#holder DIV中的一个堆栈中，然后FadeIn和FadeOut按照我的预期工作，但我需要将图像放入一个数组中并根据需要加载，因为每个图像都会有几个不同的值我可能犯了一些根本性的错误，或者我不理解FadeIn和FadeOut是如何正常工作的，因为我不是javascript和jquery方面的专家，我只是通过查看这里和类似站

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

它似乎工作正常，除了我不能让当前显示的图像在下一幅图像淡出之前淡出

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


#支架{位置：绝对；顶部：100px；背景色：#cccc；
宽度：300px；高度：200px；
}
.幻灯片{位置：相对；顶部：0px；
显示：无；
}
#大拇指李
{
显示：内联；
列表样式类型：无；
右边填充：6px；
}
//0）{//fadeout存在
美元（“#持有人img”）。淡出（700）；
//警惕（“淡出”）；
}
$（“#持有人”）.html（“”）；
美元,法代因(700美元),；
//警惕（“淡入”）；
}
函数buildThumbs（）{
var thumbs=“”；
对于（cnt=0；cnt

&上
下一步»；




播放幻灯片

Callbacks，Callbacks，Callbacks。 JS做很多事情都是异步的，所以您需要在fadein上使用回调

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

这是您的。此外，您需要确保在淡入item2之前加载图像。就是这么简单。我想我需要了解回调，并检查是否已加载建议抱歉，由于声誉原因无法投票，无法与以前的帐户合并，该帐户的声誉超过100