1

JQuery .animate を使用してこれを動作させるようになったと言うことから始めますが、パフォーマンスを向上させ、CSS3 トランジションを使用してみたいと思います。

「transition: opacity 0.6s;」を追加すると ラベルに追加し、jquery を使用して css 値を変更すると、単語は適切に生成されましたが、フェード アニメーションは消えました。元の JQuery メソッドは次のようになります。

start 4 animations to opacity:0
for loop that generates 4 new words inside a setTimeout
start 4 animations to opacity:1

私が奇妙に感じたのは、setTimeout と setInterval を完全にコメントアウトした後にアニメーションが機能し始めたことです。これらのいずれかがそこにあると、機能しなくなりました。ここでの使用は無関係なので、これは奇妙に思えます（私の知る限り）。私はグーグルで検索し、css3 トランジションに関連してこれらの関数について言及している人々を見てきましたが、ここで何が起こっているのかを説明するものを見つけることができませんでした.

function printWords() {
    var words = ["list","of","random","words"];

    var selectors = ['div#northSlogan', 'div#eastSlogan', 'div#southSlogan', 'div#westSlogan'];

    /* populate array with numbers 0 through # of elements in 'words' array */
    var nums = [];
    for (var i=0; i < words.length; i++) {nums[i] = i;}

    /* fade out all slogan divs */
    for(var i=0; i < 4; i++) {
        //$(selectors[i]).animate({opacity:0}, 600);
        $(selectors[i]).css({opacity: 0});
    }

    /* generate random index and fill slogan div with chosen text */
    //setTimeout(function() {
        for (var i=0; i < 4; ++i) {
            var index = Math.floor(Math.random()*nums.length);
            document.querySelector(selectors[i]).innerHTML = words[nums[index]];
            nums.splice(index, 1);
        }
    //}, 600);

    /* fade in all slogan divs */
    for(var i=0; i < 4; i++) {
        //$(selectors[i]).animate({opacity:0.5}, 600);
        $(selectors[i]).css({opacity: 1});
    }
}

printWords();
setInterval(printWords, 5000);

私の質問は、setInterval および setTimeout 関数がこれらの遷移を妨げているのは何ですか? 私がやっていることは可能ですか、それとも完全に間違った方法で行っていますか?

PS: 私はもともとそこに setTimeout 関数を持っていたので、 opacity:0 へのアニメーションが発生した後に単語の生成が行われました。同時に 4 つのアニメーションを開始していたため、for ループ内でコールバックを使用したくありませんでした。

4

1 に答える 1

0

このようなものをお探しですか？http://jsfiddle.net/dJQ5t/

    var selectors = ['div#northSlogan', 'div#eastSlogan', 'div#southSlogan', 'div#westSlogan'];
    var words = ["list","of","random","words"];
function printWords() {

    /* populate array with numbers 0 through # of elements in 'words' array */
    var nums = [];
    for (var i=0; i < words.length; i++) {nums[i] = i;}

    /* fade out all slogan divs */
    for(var i=0; i < 4; i++) {
        $(selectors[i]).removeClass('opaque');
    }

    /* generate random index and fill slogan div with chosen text */
    setTimeout(function() {
        for (var i=0; i < 4; ++i) {
            var index = Math.floor(Math.random()*nums.length);
            document.querySelector(selectors[i]).innerHTML = words[nums[index]];
            nums.splice(index, 1);
        }
        /* fade in all slogan divs */
        for(var i=0; i < 4; i++) {
            $(selectors[i]).addClass('opaque');    
        }
    }, 600);


}

printWords();
setInterval(printWords, 5000);

div#northSlogan,div#eastSlogan,div#southSlogan,div#westSlogan{
    opacity:0;
    transition: opacity 0.6s;
}
.opaque{
    opacity: 1 !important;
}
于 2013-08-07T23:57:45.767 に答える