提高第一个div的不透明度，同时降低第二个div的不透明度.和循环

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

当然可以。创建一个函数，在每个元素上使用jQuery.animate() in chain，将其不透明度动画为其值的倒数。使用函数本身作为第二个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演示/kbd>

我会这样做:

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

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

你可以在这里看到它的作用:http://jsfiddle.net/rcc6y1nn/2/

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

现在在setInterval中，类在循环中一秒后改变。

<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);

相关内容

最新更新

热门标签：