raise opacity for first div at same time reduce for second. And looping

Question

I have 2 divs with background-image. I want to raise at the same time opacity for first div and reduce opacity of another. And I want to loop that. I want to get the smoothly effect of shifts backgrounds. Is there such a way to do that?

<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

Sure you can. Create a function, use jQuery.animate() in chain on each element to animate its opacity to the inverse of its value. Use the function itself as a callback of the second animate function.

<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

Answer 2

I would do something like that:

So there is an active class that changes the opacity and visibility of the imgHolder . If you click on the first image it removes the active class on that element and jumps to the next element in the DOM and adds there the active class. You could get be more save if you write next('imgHolder') so that only the next element with class imgHolder gets the active class.

I also add a loop. So with the length function it counts how much elements with imgHolder are in the DOM. In this case 2. So after the second is active it goes to the first imgHolder .

You can see it in action here: http://jsfiddle.net/rcc6y1nn/2/

I hope you want something like that.

UPDATE
Now with setInterval the class changes after one second in a loop.

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