同時提高第一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);