以不同的延迟淡化两个图像答案

【问题标题】：Fade two images with different delay以不同的延迟淡化两个图像
【发布时间】：2014-04-23 05:45:17
【问题描述】：

我正在尝试以不同的延迟淡化同一页面上的 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');

【问题讨论】：

绑定到 transitionEnd 事件：css3.bradshawenterprises.com/transition-callbacks

标签： javascript jquery html css fade

【解决方案1】：

您可以修复几件事以使其正常工作：

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/

无论如何，恕我直言，如果您对两个转换使用相同的持续时间（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/

【讨论】：

谢谢pablopixel。效果很好，但是如果我点击下一项 Newsletter 然后我回到主页，效果就不起作用了。
好吧，你没说点击； )
是的 pablopixel，你是对的。我现在才评论。当只有一个图像字节而没有 2 个字节时，它似乎有效。
无论如何，这是因为您在“时事通讯”中使用了相同的图片。点击“路线和营业时间”，然后返回“首页”，您会看到它正在工作。
是的，如果我点击下一个按钮直到方向和营业时间然后再到家，它就会起作用。很奇怪，直接点击菜单就不行了

【解决方案2】：

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

【讨论】：

【解决方案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/

【讨论】：