Geek Answers Handbook

Is it possible to cyclically change opacity values ​​in HTML5 or css?

This is the code I'm working with right now. This works for my purposes of bundling two images. What I'm trying to do is opacity layer0 below 0, as the opacity of layer1 increases to 100 in a few seconds. {and then go to layer 1 with layer 2, etc., eventually returning to layer0}

Any help would be appreciated.

<head>
  <style>
    div.layer0
    {
      width: 371px;
      height: 345px;
      background:url(image2.jpg);
      opacity:1;
      filter:alpha(opacity=100); /* For IE8 and earlier */
    }

    div.layer1
    {
      width: 371px;
      height: 345px;
      background:url(image3.jpg);
      opacity:0;
      filter:alpha(opacity=0); /* For IE8 and earlier */
    }

  </style>
</head>

<body>
  <div class="layer0">
    <div class="layer1">
    </div>
  </div>
</body>
+4
source share
3 answers

Short answer: not easy.

, javascript . , : jsfiddle.net/G4PTM (firefox/ie10) - , , (, /, )

javascript div , , . ( jQuery , , vanilla js)

HTML

<div class="layer0">
</div>
<div class="layer1">
</div>
<div class="layer2">
</div>

CSS

div {
    width: 371px;
    height: 345px;
    opacity: 0;
    position: absolute;
    transition: opacity 2s;
}
div.active {
    opacity: 1;
}
div.layer0 {
    background:url(http://lorempixel.com/373/345);
}
div.layer1 {
    background:url(http://lorempixel.com/372/345);
}
div.layer2 {
    background:url(http://lorempixel.com/374/345);
}

JS + JQuery

var firstDiv = $(".layer0");
var current;

function loopsie() {
    // if first iteration or reached end, use first div
    if (!current || !current.length) current = firstDiv;
    current.addClass("active");

    setTimeout(function() {
        current.removeClass("active");

        setTimeout(function() {
            current = current.next();
            loopsie(); // recurse
        }, 2000);

    }, 2000);
}

//initialize
loopsie();

http://jsfiddle.net/G4PTM/2/

JavaScript ( jQuery):

var firstDiv = document.querySelector(".layer0"); // IE 8+
var current;

function loopsie() {
    // if first iteration, use first div
    if (!current) current = firstDiv;
    current.classList.add("active"); // IE 10+, shim at https://developer.mozilla.org/en-US/docs/Web/API/Element.classList

    setTimeout(function() {
        current.classList.remove("active");
        // account for text node (if there is whitespace in html)
        if (current.nextSibling && current.nextSibling.nodeName == "DIV") {
            current = current.nextSibling;
        } else if (current.nextSibling && current.nextSibling.nextSibling && current.nextSibling.nextSibling.nodeName == "DIV") {
            current = current.nextSibling.nextSibling;
        } else {
            // reached end
            current = firstDiv;
        }
        loopsie(); // recurse
    }, 2000);

}

//initialize
loopsie();

http://jsfiddle.net/G4PTM/6/

+1

, javascript, active , . , CSS, .

jsfiddle, : http://jsfiddle.net/pacso/H6dqq/

.

HTML-div, :

<div class='red square active'></div>
<div class='yellow square'></div>
<div class='green square'></div>
<div class='blue square'></div>

, .

, CSS:

.red {
    background-color: red;
}
.blue {
    background-color: blue;
}
.green {
    background-color: green;
}
.yellow {
    background-color: yellow;
}

.square {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 20px;
    left: 20px;

    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; /* Safari */
}
.active {
    opacity: 1;
}

, div. , .

javascript, :

jQuery(function() {
    window.setInterval(function () {
        activeSquare = $('.active');
        nextSquare = activeSquare.next()
        if (nextSquare.length == 0) {
          nextSquare = activeSquare.siblings().first();
        }
        nextSquare.addClass('active');
        activeSquare.removeClass('active');
    }, 3000);
});

. , .

+3

You can use CSS transitions. The following example fades .layer0 in a 500 ms time frame:

div.layer0 {
    opacity: 1;
    -webkit-transition:opacity 500ms ease-out;
    -moz-transition:opacity 500ms ease-out;
    -o-transition:opacity 500ms ease-out;
    transition:opacity 500ms ease-out;
}

div.layer0:hover {
    opacity: 0;
}
0
source

More articles:


All Articles