同时提高第一div的不透明度。 和循环

Question

我有2个具有背景图像的div。 我想同时提高第一格的不透明度，并减少另一个的不透明度。 我想循环一下。 我想获得轮班背景的流畅效果。 有这种方法吗？

<div class="first"></div>
<div class="second"></div>

.first, .second {
    position: absolute;
    height: 100%;
    width: 100%;
}
.first {
    background: url(http://placehold.it/350x150);
    background-size: cover;
    opacity: 0;
}
.second {
    background: url(http://placehold.it/250x150);
    background-size: cover;
    opacity: 1;
}

的jsfiddle

Answer 1

你当然可以。 创建一个函数，在每个元素的链中使用jQuery.animate()将其不透明度动画化为其值的倒数。 使用函数本身作为第二个动画函数的回调。

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>

var box = $('.box');

function animateOpacity() {

    box.each(function () {

        var opacity = parseInt($(this).css('opacity'));

        $(this).animate({
            opacity: 1 - opacity
        }, 800).animate({
            opacity: opacity
        }, 800, animateOpacity);
    });
}

JSFiddle演示

Answer 2

我会做这样的事情：

因此，有一个active类可以更改imgHolder的不透明度和可见性。 如果单击第一个图像，它将删除该元素上的active类，并跳转到DOM中的下一个元素，并在其中添加active类。 如果您编写next('imgHolder') ，则可以节省更多，这样只有下一个具有imgHolder类的元素imgHolder获得active类。

我还添加了一个循环。 因此，使用length函数可以计算imgHolder中DOM中的元素数量。 在这种情况下，2。因此在第二个active后，它转到第一个imgHolder 。

您可以在这里查看其运行情况： http : //jsfiddle.net/rcc6y1nn/2/

我希望你想要那样的东西。

UPDATE
现在，使用setInterval ，类将在循环一秒钟后更改。

HTML

<div class="imgHolder first"></div>
<div class="imgHolder second"></div>

CSS

.imgHolder {
    position: absolute;
    top: 0;
    opacity: 0;
    visibility: hidden;
    width: 350px;
    height: 350px;
    -webkit-transition: all 150ms ease-in;
    transition: all 150ms ease-in;
}
.imgHolder.first {
    background: url('http://lorempixel.com/output/technics-q-c-350-350-10.jpg');
}
.imgHolder.second {
    background: url('http://lorempixel.com/output/animals-q-c-350-350-5.jpg');
}
.imgHolder.active {
    opacity: 1;
    visibility: visible;
}

使用Javascript

var $imgHolder = $('.imgHolder');

$imgHolder.first().addClass('active');

setInterval(function(){
    var $next = $('.imgHolder.active').removeClass('active').next();
    if ($next.length) {
        $next.addClass('active');
    } else {
        $imgHolder.first().addClass('active');
    }
}, 1000);