0

背景色と一連の画像を javascript によるクロスフェードで変更しようとしています。最初の 3 ～ 4 ループでは、両方が同期されます (各色は 2 秒で、各画像は 2 秒で) が、しばらくすると背景色の変化が遅くなり、遅れます。両方の要素を同時に同時に変更したい。助けてください。フィドル - jsfiddle.net/pEHZR 

$(function () {
var colors = ['black', 'red', 'blue', 'black'];
var i = 0;
var cont = $('div.container');
var back = $('div.back');
back.css('opacity', 1);
back.css('backgroundColor', colors[0]);
cont.css('backgroundColor', colors[1]);

window.onload = function start() {
    setInterval(function () {
        anim();
    }, 2000);
}

function anim() {
    if (i == colors.length - 1) {
        i = 0;
        return;
    }
    back.css({
        backgroundColor: colors[i],
        opacity: 1
    });
    cont.css({
        backgroundColor: colors[i + 1]
    });
    i++;
    back.stop().animate({
        opacity: 0
    }, 2000, anim);
}
});

$(function () {
$('.fadein img:gt(0)').hide();
setInterval(function () {
    $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}, 2000);
});
4

1 に答える 1

0

setInterval 関数を削除し、すべてのコードを 1 か所にまとめたので、アニメーションとテキストが同期されます。

HTML:

<div class="container">
    <div class="back"></div>
    <div class="main"></div>
</div>

CSS:

.container {
    position:absolute;
    top:0px;
    left:50%;
    margin-left:-75px;
    width:130px;
    height:130px;
    border:10px solid yellow;
}
.back {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.main {
    position:relative;
    text-align:center;
    color:white;
    background-color:transparent;
}

JS:

$(function () {
    var colors = ['black', 'red', 'blue', 'green', 'black'];
    var i = 0;
    var cont = $('div.container');
    var back = $('div.back');
    var main = $('div.main');
    back.css('opacity', 1);
    back.css('backgroundColor', colors[0]); // start color , fades out
    cont.css('backgroundColor', colors[1]); // target color
    anim();

    function anim() {
        if (i == colors.length - 1) {
            i=0;
            //return; // repeat ad infinitum
        }
        main.text(colors[i+1]);
        var top = (cont.height() - main.height())/2 |0;
        main.css('top', top + 'px'); //center text vertically
        back.css({
            backgroundColor: colors[i],
            opacity: 1
        });
        cont.css({
            backgroundColor: colors[i+1]
        });
        i++;
        back.stop().animate({
            opacity: 0
        }, 2000, anim);
    }
});

http://jsfiddle.net/TytSZ/10/
http://jsfiddle.net/TytSZ/12/ (透明な .png 画像でアルゴリズムを変更)

于 2013-07-29T08:42:02.783 に答える