0

私はこのようなjavascriptオブジェクトを持っています、

var telephones = {
        /*
        "phone" : {
            duration    :   time it takes to animate element in,
            leftIn      :   position of element once on the incoming animation
            leftOut     :   position of element on the outgoing animation
            delay       :   delay between two animations
        }
        */
        "phone1": {
            duration    :   850,
            leftIn      :   "408px",
            leftOut     :   "9999px",
            delay       :   0,
        },
        "phone2" : {
            duration    :   600,
            leftIn      :   "962px",
            leftOut     :   "999px",
            delay       :   setDelay(),
        },
        "phone3" : {
            duration    :   657,
            leftIn      :   "753px",
            leftOut     :   "9999px",
            delay       :   0,
        },
        "phone4" : {
            duration    :   900,
            leftIn      :   "1000px",
            leftOut     :   "9999px",
            delay       :   setDelay(),
        },
        "phone5" : {
            duration    :   1200,
            leftIn      :   "800px",
            leftOut     :   "9999px",
            delay       :   0,
        },
        "phone6" : {
            duration    :   792,
            leftIn      :   "900px",
            leftOut     :   "9999px",
            delay       :   setDelay(),
        },

    };

上記のオブジェクトを使用して、スライド内の個々の要素をアニメーション化しようとしています。これは、jqueryサイクルプラグインを介して既にアニメーション化されています。私は次のようにコードを使用しています、

$('#slideshow').cycle({
    fx: 'scrollHorz',
    before  :   triggerParralex,
    after   :   removeParralex,
    easing  :   'easeOutCubic',
    speed   :   2000
});

したがって、上記のコードはサイクルプラグインを開始します。次に、コールバックの前後を使用してさらに2つの関数を実行しています。これらの関数は、次のようになります。

function bgChange(curr, next, opts) {
    var background = $(".current").attr('data-background');
    $.backstretch(background, {target: "#backstrectch", centeredY: true, speed: 800});
}

function triggerParralex(curr, next, opts) {
    //move any phones that are in the viewport
    for (var key in telephones) {
        var obj = telephones[key];
        for (var prop in obj) {
            if($(".current ." + key).length) { //does .custom .phone1/2/3/4/5/6 exist if it does we can carry on
                setTimeout(function() {
                    $(".current ." + key).animate({
                        "left"      :   obj["leftOut"],
                        "opacity"   :   0
                    }, obj["duration"]);
                }, obj["delay"]);
            }
        }
    }

    //change the background
    bgChange();

    //remove the current class from the DIV
    $(this).parent().find('section.current').removeClass('current');

}

function removeParralex(curr, next, opts) {

    //give the slide a current class so that we can identify it.
    $(this).addClass('current');

    //animate in any phones that belong to the current slide
    for (var key in telephones) {
        var obj = telephones[key];
        for (var prop in obj) {
            console.log(obj["leftIn"])
            if($(".current ." + key).length) { //does .custom .phone1/2/3/4/5/6 exist if it does we can carry on
                setTimeout(function() {
                    $(".current .phone1").animate({
                        "left"      :   obj["leftIn"],
                        "opacity"   :   1
                    }, obj["duration"]);
                }, obj["delay"]);
            }
        }
    }

}

私の問題は次のとおりです、

セクション要素にある画像をアニメーション化しようとしていますが、セクション要素はすでにサイクルプラグインを介してスライドしているものですが、これにより、後の段階で画像のアニメーション化が停止しているように感じますか？

2番目の問題は、私のスクリプトが喜んで見つける$(".current .phone1")のは、オブジェクトからphone6のプロパティを追加するだけのようですが、フィドルを作成したことです。

フィドルからわかるように、セクション#slideshowは循環していますが、その中の画像はアニメーション化されていません...なぜですか？

4

1 に答える 1

0

フェリックス・クリングがコメントで言ったように、あなたは古典的な「ループ内の閉鎖」の問題を抱えています。

これが（古典的な）解決策です：

for (var key in telephones) {
    if($(".current ." + key).length) { //does .custom .phone1/2/3/4/5/6 exist if it does we can carry on
        var obj = telephones[key];
        (function(obj){
            setTimeout(function() {
                $(".current .phone1").animate({
                    "left"      :   obj["leftIn"],
                    "opacity"   :   1
                }, obj["duration"]);
            }, obj["delay"]);
        })(obj);
    }
}

アイデアは、objを別のクロージャーに埋め込み、ループから分離して、その変更を防ぐことです。

于 2012-07-20T15:10:12.070 に答える