按顺序对图像应用效果答案

【问题标题】：Applying effects to Images in sequence按顺序对图像应用效果
【发布时间】：2011-11-03 19:31:19
【问题描述】：

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

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

尝试修改单个 <img> 标签，然后用 html() 填充 <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>

【问题讨论】：

你需要使用fadeOut的回调函数：api.jquery.com/fadeOut/#callback-function（你自己试试会好很多。）

标签： jquery image effects fade

【解决方案1】：

这个怎么样：

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的回调函数。

http://jsfiddle.net/9KYqJ/

【讨论】：

谢谢大家，我会尝试使用回调函数并反馈。
所以你们都想到了有用的回调函数。我使用了 Adam Terlson 的示例，添加了“fadeIn()”、“delay()”，然后添加了“else”来执行与“if”相同的操作，但仅将 0 作为参数传递给在第一张图片上重置循环。
哦，由于某种原因，迭代 imgIndex++ 并没有以这种方式工作，所以我将其更改为 imgIndex+1，这可以解决问题。

【解决方案2】：

试试这个：

淡入淡出图像，直到您淡入和淡出所有图像

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的第二个参数，它是回调，当动画结束时执行这个函数

【讨论】：