0

次のマークアップを含む HTML ドキュメントがあります。

<div id="outside">
<div id="warning">Some warning here</div>
<div id="inside"></div>
</div>

私がやりたいことは、リストされた順序で、前の項目が完了する前に次の項目に進むことなく、次のリストです。

  1. #outside 要素を非表示にします。
  2. #inside の内容を「foo」に設定します。
  3. #outside 要素を表示します。

jQuery を使用すると、次のようなことができます。

$('#outside').hide(function(){
    $('#inside').html('bar');
    $('#outside').show();
});

このコードは、より多くのイベントにコールバックが含まれているため、より複雑になり、保守が容易ではなくなります。

代わりに、次のようなことをしたいと思います。

$.sequence(
    function(){ $('#outside').hide(); },
    function(){ $('#inside').html('foo'); },
    function(){ $('#outside').show(); }
);

このコードは、プロセスの各ステップを明確に示しており、ネストされた関数コールバックを必要としないため、任意のステップを簡単に挿入/削除できます。

ここに示されている HTML は、私が実際に使用しているものから大幅に単純化されていることに注意してください。また、これらの要素に適用したい一連のアクションはより長くなります。

通常、これは同じ jQuery 要素に対する順次メソッド呼び出しでのみ可能ですが、キューを順番に実行できない別の要素が使用されています。読み取り時にきれいに見え、任意の要素で動作する呼び出しをシーケンスする方法を探しています。

4

3 に答える 3

3

この特定の例では、それは比較的簡単です。次の方法で目的の結果を得ることができます。

$('#outside').hide();
$('#inside').html('foo');
$('#outside').show();

ただし、非同期イベントをスローすると、これは明らかに機能しません。代わりに、ajaxで「foo」を取得したいとします。これは、比較的一般的な方法です。

// request for content immediately
var req = $.get("myfile.php");
// fade out container
$("#outside").fadeOut(function(){

    // now that the container is faded out, we
    // bind to the done callback of the request
    // so that we can use the response and fadeIn the container
    // as soon as possible without causing an abrupt stop of the animation
    // if the request finishes early (it most likely will).
    req.done(function(response){
        $("#inside").html(response);
        $("#outside").fadeIn();
    });
});

遅延オブジェクトの使用に慣れていない限り、それについては何も読みにくいものはありません。その結果、微妙なアニメーションを使用してコンテンツを可能な限り高速に取得して表示する少量のコードが生成されます。

もちろん、本当に「見栄えを良く」したい場合は、関数の背後にあるこのメソッドを抽象化することもできますが、保守性が低下する可能性があります（その関数をどこで定義しましたか？）

于 2012-12-11T20:37:11.630 に答える
1

この例はあなたのために働きますか？

function performTransition(){
    $('#outside').hide();
    $('#inside').html('foo');
    $('#outside').show();
}

$(function(){
    $(selector).click(performTransition);
});
于 2012-12-11T20:36:15.887 に答える
0

.queue標準のアニメーション キューを使用して使用できます。それでもかなり冗長ですが、少なくともネストはありません。

$("#outside").queue(function() {
   $("#outside").hide('slow');
   $(this).dequeue();
});
$("#outside").queue(function() {
   $("#inside").html('bar');
   $(this).dequeue();
});
$("#outside").queue(function() {
   $("#outside").show();
   $(this).dequeue();
});
于 2012-12-11T20:47:31.340 に答える