以不同的延迟淡入两张图像

Fade two images with different delay

本文关键字：两张 图像 淡入 延迟      更新时间：2023-09-26

我试图用不同的延迟在同一页面上淡入两个不同的图像。第一个图像出现，然后第二个图像出现。

这是我的小提琴：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');

为了使其正常工作，您可以修复以下几件事：

1） 在.shown1 img2规则中，img2前面缺少一个点（.）。你指的是一个类，而不是HTML标记。那一定是这样的：

.shown1 .img2{
    opacity: 1;
}

2） 如果要将延迟应用于CSS转换，可以在简写转换属性或转换延迟属性中的持续时间之后指定它。例如，对于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/

不管怎样，IMHO，如果你在两个过渡中使用相同的持续时间（3000ms或3s）会更好。

编辑：如果您不想等待动画完成后再重新开始，请将转换属性放入.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/

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

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/

相关文章：