javascript - 提高第一个 div 的不透明度，同时减少第二个。并循环

Question

我有 2 个带有背景图像的 div。我想同时提高第一个 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 demo