Question

我今天早上开始使用jQuery（所以我是一个菜鸟），一开始看起来很有希望，但后来......

这个想法是一个接一个地延迟淡入和淡出图像。但它们都在同一时间消失，然后消失了。我希望他们一个接一个地做。

尝试修改单个<img>标记，然后填写html（）a <div>，然后再加上其他内容。这可能是小菜一碟，但我只是看不到它！

<html>
<head>
<style type="text/css">

    span.button{
        display:block;
        width:10px;
        border:1px solid;
        float:left;
        background:#eeeeee;
        padding:5px;
        margin:5px;
        font-weight:bold;
        color:#333333;
        cursor:pointer;
        border-radius:7px;
        border-color:#555555; 
        box-shadow: 0px 0px 2px #777777;
    }

img.gImages{
    border:1px solid;
    border-left-color:#eeeeee;
    border-top-color:#eeeeee;
    border-right-color:#666666;
    border-bottom-color:#666666;
    border-radius:5px;
    height:300px;
    box-shadow: 0px 0px 5px #777777;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var numOfimgs=3;
$(document).ready(function(){

function preloadImages(numOfimgs){
    var i=0;
    for(i=1; i<numOfimgs+1; i++){
        $("div").append('<img class="gImages" id="'+i+'slika" src="'+i+'.jpg" />');
        $("img#"+i+"slika").hide();
        $("div").append(i);
    }
}
preloadImages(numOfimgs);

function animateImage(imgId){
    $("img#"+imgId+"slika").fadeIn("slow");
    $("img#"+imgId+"slika").fadeOut("slow");
}

function startAnimation(){
var i=0;
for(i=1; i<numOfimgs+1; i++){
    animateImage(i);
    }
}

startAnimation();
});
</script> 
</head>

<body>
<div></div>
<span>below the div</span>
</body>
</html>

Answer 1

试试这个：

FadeIn和fadeOut图像，直到你有淡化和淡出所有图像

function animateImage(imgId){
     if($("img#"+imgId+"slika").length <> 0)
     {
         $("img#"+imgId+"slika").fadeIn("slow", function(){
              $("img#"+imgId+"slika").fadeOut("slow", function(){ animateImage(imgId + 1);});
         });
     }

}

function startAnimation(){

       animateImage(0);

}

据我所知，我使用fadeIn和fadeOut的第二个参数，它是回调，动画完成时执行此功能

Answer 2

这个怎么样：

function sequencedFade(imgIndex, numImages) {
    if(imgIndex <= numImages) {
        //... your other random stuff here
        $("#"+imgIndex+"slika").fadeOut('slow', function() { sequencedFade(imgIndex++, numImages) });
        //... more other random stuff
    }
}

sequencedFade(0, 3);

这使用fadeOut的回调函数，该函数在动画完成时执行。

按顺序对图像应用效果

2 个答案:

的 http://jsfiddle.net/9KYqJ/