javascript - 用不同的延迟淡化两个图像

Question

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

这是我的 fiddle :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 过渡应用延迟，可以在速记过渡属性中的持续时间之后或在过渡延迟属性中指定它。例如，对于 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;
}

工作 fiddle :http://jsfiddle.net/FL3RK/3/