1

まず、私は js と jQuery の両方に比較的慣れていないため、これが本当にばかげた質問である場合は、事前にお詫び申し上げます。そうは言っても、ここにあります：ある画像から別の画像へのゆっくりとした「スイープのような」遷移を行う背景用の大砲のようなアニメーションを作成しようとしています。私が直面している最大の問題は、それを確実にすることです。を。インクリメント カウンターが進行し、b. 画像の各「スライス」は、次のスライスが始まる前にフェードアウトを完了します。

これを行う簡単な (または明白な) 方法があれば、ぜひ聞きたいです。私はしばらくの間、これら (および他の同様のバリエーション) が機能しない理由を突き止めようとして、髪を引っ張ってきました。

HTML: img class="bg" (これの 10 個のインスタンス)

(function () {
  // --- Variation 1 ---

  function effect() {
    var i = 0,
    var current = $(".bg_1:eq(" + i + ")"),
      arrLength = $(".bg_1").length;
    while (i < arrLength) {
      current.fadeOut(1000, 0);
      i++;
    }

  }
  effect();

  // --- Variation 2 ---
  function effect() {
    var i = 0,
    var current = $(".bg_1:eq(" + i + ")"),
      arrLength = $(".bg_1").length;
    while (i < arrLength) {
      current.fadeOut(1000, 0, function () {
        i++;
      });
    }

  }
  effect();

})();

「i」変数のスコープに問題があるか、そのスコープの深さでのjQueryの競合である可能性があると思います。可能な解決策は大歓迎です！

ありがとう。

4

4 に答える 4

1

HTML が表示されないと、答えるのは少し難しいですが、複数の要素を順番にアニメーション化する一般的な方法を次に示します。

(function _loop(idx) {
    var $elements = $('#wrapper .bg'), idx = idx % $elements.length;
    $elements.eq(idx).fadeIn('slow').delay(2500).fadeOut('slow', function () {
      _loop(idx + 1);
    });
}(0));​

デモ: http://jsfiddle.net/UU5AM/

于 2012-07-10T11:44:39.417 に答える
0

fadeOut'引数を使用callbackして、アニメーションの完了時に実行される関数を提供できます。これを使用して、カウンターを上げ、（必要に応じて）次の要素をアニメーション化できます。

例えば：

(function () {

  function effect() {
    var i = 0,
    var current = $(".bg_1:eq(" + i + ")"),
      arrLength = $(".bg_1").length;
    var animateNext = function() {
      current.fadeOut(1000, 0, function() {
        i++;
        if (i < arrLength) {
          animateNext();
        }
      });
    }
    animateNext();
  }

  effect();

})();

ご覧のとおり、再利用可能な関数をに格納していanimateNextます。effectアニメーションの文字列を開始するために、最初の最後にそれを呼び出します。その後、次の各アニメーションはのコールバックから開始されますfadeOut。

于 2012-07-10T11:47:21.337 に答える
0

あなたのソリューションは、すべての写真を一度にアニメーション化しています。これを行うには、イベントの再帰チェーンをインストールする必要があります。

// initial count value declared outside the function to not reinitialize
var count = 0;
function effect() {
  // search the current image
  var current = $(".bg_1:eq(" + count + ")");
  // if there's an image, fade it out
  if (current.length) {
    current.fadeOut(1000, function() {
     // increment the count;
     count++;
     // call the function recursively
     effect();
    });
  }
}
// call the function
effect();

ここで JSFiddleとの連携を参照してください

于 2012-07-10T11:41:50.957 に答える
0

あなたのvar current意志はいつも同じです

これを試して：

function effect() {
    var i = 0;
    var arrLength = $(".bg_1").length;
    while (i<arrLength) {
        $(".bg_1:eq(" + i + ")").fadeOut(1000, 0);
        i++;
    }

}
effect();

while ループと同じ速度で実行されるようになりました。つまり、ほとんどすぐにすべてがフェードアウトします。setTimeout次のように、fadeOut が続く限り、関数を実行したい場合があります。

var i = 0;
setTimeout(function(){ 
    $(".bg_1:eq(" + i + ")").fadeOut(1000, 0);
    i++;
}, 1000);

もちろん、最後に到達したらリセットする必要があります。

編集：フェードアウトが完了したときに関数を再度実行して、リチャーツの方法を打ち負かすことは、setTimeout.

于 2012-07-10T11:42:07.503 に答える