Question

我试图在同一页面上以不同的延迟淡化2个不同的图像。出现第一张图像，然后出现第二张图像。

这是我的小提琴：http://jsfiddle.net/jarod51/4RvWY/3/

css：

.panel img {
        opacity:0;
        -moz-transition: opacity 3000ms ease-in-out;
        -webkit-transition: opacity 3000ms ease-in-out;
        transition: opacity 3000ms ease-in-out;
    }

    .shown img{
        opacity: 1;
    }

.img2{
    opacity:0;
        -moz-transition: opacity 10000ms ease-in-out;
        -webkit-transition: opacity 10000ms ease-in-out;
        transition: opacity 10000ms ease-in-out;
}

.shown1 img2{
        opacity: 1;
    }

html：

<div id="home" class="panel">
        <h2>Home</h2>
        <img src="http://lorempixum.com/200/200/people/3"/>
        &nbsp;
        <img class="img2" src="http://lorempixum.com/200/200/people/1"/>

    </div>

我的jquery尝试：

$('#wrap').find('.shown').removeClass('shown');
                $target.addClass('shown');
                $('#wrap').find('.shown1').removeClass('shown1');
                $target.addClass('shown1');

Answer 1

有一些事情你可以解决它让它运作：

1）你在.shown1 img2规则中的img2之前错过了一个点（。）。您指的是类而不是HTML标记。那必须是这样的：

.shown1 .img2{
    opacity: 1;
}

2）如果要对CSS转换应用延迟，可以在速记转换属性或transition-delay属性中的持续时间之后指定它。例如，对于2秒延迟，您可以使用：

.panel .img2{
    opacity:0;
    -moz-transition: opacity 10000ms 2s ease-in-out;
    -webkit-transition: opacity 10000ms 2s ease-in-out;
    transition: opacity 10000ms 2s ease-in-out;
}

在此处查看此行动：http://jsfiddle.net/FL3RK/2/

无论如何，如果你使用相同的持续时间（3000毫秒或3秒）进行两次转换，恕我直言会更好。

编辑：如果您不想等待动画完成重新开始，请将过渡属性放在.shown1 .img2规则中，如下所示：

.shown1 .img2{
    opacity: 1;
    -moz-transition: opacity 3000ms 2s ease-in-out;
    -webkit-transition: opacity 3000ms 2s ease-in-out;
    transition: opacity 3000ms 2s ease-in-out;
}

工作小提琴：http://jsfiddle.net/FL3RK/3/

Answer 2

var finished = 0;
var callback = function (){
  // Do whatever you want.
  finished++;
}
$(".div"+finished).animate(params, duration, null, callback);

Answer 3

HTML

  <img src="http://lorempixum.com/200/200/people/2"/>
  <img src="http://lorempixum.com/200/200/people/1"/>
  <img src="http://lorempixum.com/200/200/people/2"/>
  <img src="http://lorempixum.com/200/200/people/4"/>

CSS

img {display:none;}

脚本

$("img").each(function(i) {
               $(this).fadeIn(2000*(i+1));
          });

查看小提琴http://jsfiddle.net/vishnurajv/px7U5/

淡化两个不同延迟的图像

3 个答案: