javascript - jquery queue to parent rather than specific children?

Question

I am making some animation on children of a div, the children are animating one at a time on hover, while the other are stopping, and sometimes being removed too. What I wanted though is a callback for when all the animation has stopped/ ceased / or is no longer moving - in other words.

...I tried to make something like this, to queue directly to the parent, but this doesn't seem to work at all:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" >
            $(document).ready(function(){   

                $('div.start').click(function(){

                    $('<img style="display:block;display:none;" src="http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg">')
                    .appendTo($(this))
                    .animate({opacity:0},0)
                    .css('display','block')
                    .animate({opacity:1},2000,function(){});

                    $(this).queue(function(){
                        $('#gotcha').html(1+parseInt($('#gotcha').html()));
                    });

                });         
            });
            </script>
        <style>
            div.start{
                background-color:#0057D8;
                width:100px;
                float:left;
            }
            div#gotcha{
                float:left;
                width:100px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div class="start">Start</div>
        <div id="gotcha">
            0
        </div>
    </body>
</html>

The number was suppossed to change once animation is complete, but this never happens. Is there any other approach I could do? Or perhaps to get the remaining time of fx somehow, and go with a setTimeout?

アドバイスをいただければ幸いです。

編集：なぜ私はこれをしたいのですか？

実際には、さまざまな小さな親指の画像があり、それらをホバリングすると、それらは dom に大きな対応物を作成し、ロード時にショーケースの div に接続します。添付された画像は互いに重なり合い、スムーズなトランジション効果を実現します。読み込まれた最新の画像がアニメーション化され、他の兄弟のアニメーション化も停止します。マウスを離すと、元の画像にズームバックするためにすべてのアニメーションが停止したら、タイムアウトを作成したいと考えています。.children('img:last').queue(function(){}) を使用してズームバック効果を最新の子にキューイングしようとしましたが、ロードイベントと非同期でロードされるため、シーケンスが明確ではありません。アニメーションが完成しました。すぐにマウスを離さないと、不透明度 1 が適用され、他の兄弟も親から削除されます。それはそう'

EDIT 2：今、私は自分のコードを少し変更しました.imgがロードされたらdivにのみアタッチするので、最後にロードされたものは常にimg：lastセレクターで利用できますが、これはバグから保護されていないことがわかります.

今、私は次のようなことをするのが最善だと考えています：

すべての子に対して isAnimated を取得します。
アニメーションの場合 - 期間を取得し、タイムアウトイベントを設定します。
いいえ - イベントを直接実行します。

問題は、アニメーションの残り時間を取得する方法がわからないことです。その上でアドバイスをいただけると大変助かります。ありがとう

score 0 · Accepted Answer

私が収集したものから、要素の特定のコレクションに対してすべてのアニメーションが完了した後に、コールバックを実行しようとしています。この場合、親要素の子:

$(parentElement).children().promise().done( function() {
  alert("Animation complete!");
}

score 0 · Accepted Answer

アニメーションの時間は一定で、適切なタイミングでキャッチするだけの問題であることが判明したため、一般的な変数を使用することにしたので、アニメーションを開始する前に変数をアニメーションの長さに設定しました。

例えば。

time=400;

次に、このタイマーでアニメーションを作成します。後で、アニメーションのステップ関数を追加して、数値をより正確に決定する可能性があります...

score 0 · Accepted Answer

私がやろうとしていたことは、どう見ても不可能でした。

提起された問題の解決策は次のとおりです。

子供のアニメーションのステップを作成し、それを完了するのに必要な時間を設定します。

次に、この変数を取得し、タイムアウトを設定して、アニメーションの後に実行されるようにします。

また、子のいずれかがその変数に書き込むことができる可能性があるため、それらを検索する必要はありません。

最終的に、それは私の仕事を完全に達成しました。

score 0 · Accepted Answer

質問を正しく理解できたかどうかはわかりませんが、ユーザーが「開始」をクリックするたびに画像が表示され、数が増えるようです! もしそうなら：

このフィドルの実例を見てください!

Jクエリ

$('div.start').click(function(){
  var $me = $(this),
      src = 'http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg';

  $('<img style="display:block;display:none;" src="'+src+'">')
    .appendTo($me)
    .css({"display":"block", "opacity":0})
    .animate({opacity:1},2000,function(){
      $('#gotcha').html(1+parseInt($('#gotcha').html()));
    });
});

CSS

div.start {
  background-color:#0057D8;
  width:100px;
  float:left;
}
div#gotcha {
  float:left;
  width:100px;
}

HTML

<div></div>
<div class="start">Start</div>
<div id="gotcha">0</div>

編集済み

コメントで要求されたものに編集し、キューに入れられたアニメーションが空の場合にのみ #gotcha を更新します。

新しいFiddle の例をご覧ください。

HTML

<div class="start">Start</div>
<div id="gotcha">0</div>

Jクエリ

// Jquery Object and image SRC
var $me = $('div.start'),
    src = 'http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg';

// On click over "start"
$me.on("click", function(){
    $('<img style="display:block;display:none;" src="'+src+'">')
        .appendTo($me)                                // append img to div
        .css({"display":"block", "opacity":0})        // hide img
        .animate({opacity:1},2000, function() {       // animate
            if ($me.queue('fx').length==0) {          // if queue is empty
                $('#gotcha').html("1");               // update #gotcha to 1
            }
        });
});

CSS

div.start {
    background-color:#0057D8;
    width:100px;
    float:left;
}
div#gotcha {
    float:left;
    width:100px;
}

javascript - jquery queue to parent rather than specific children?

4 に答える 4

編集済み

Related

Reference