アニメーションが最初の関数で実行された後に2番目の関数（blockdone）を実行します。関数キューを作成する方法
私は、アニメーションメソッドのコールバックにblockdoneを入れることでこれを行うことができます。しかし、私が取り組んでいるプロジェクトに固有の理由から、私はこれを行うことはできません。
JavaScriptまたはjQueryの関数をキューに入れる方法はありますか？
https://jsfiddle.net/bazzle/mdawnrtq/
function blockmove(){
$('.block').animate({top: '100px'},{duration: 1000}).animate({width: '0'});
};
function blockdone(){
$('p').text('Done');
};
blockmove();
blockdone();
下のコードを変更する必要が
、あなたはjQueryのqueue機能を経由して、これを行うことができます。文字通り、キュー内の他のすべての関数が完了したときに呼び出される関数を指定することができます。
選択のために複数のキューを作成できるため、キューの名前を指定できますが、この機能が動作するデフォルトキューは、エフェクト（.animate()）が格納されているキューです。それはまさにあなたが望むものです。
function blockmove() {
$('.block').animate({
top: '100px'
}, {
duration: 1000
}).animate({
width: '0'
});
};
function blockdone() {
$('p').text('Done');
};
blockmove();
$('.block').queue(blockdone); // <-- CHANGEDhtml,
body {
margin: 0;
}
.block {
background-color: red;
width: 100px;
height: 100px;
display: block;
position: relative;
}
p {
position: absolute;
top: 1em;
right: 1em;
text-align: right;
display: block;
margin: 0;
}<div class="block"></div>
<p></p>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>これは理想的なことですが、私はその機能について知りませんでした。ありがとう！ – bazzlebrush
多分これは非常に野心的ではありませんが、あなたは、アニメーションの継続時間を知っているので、あなたはテキストを表示されて遅らせるようにsetTimeout機能を使用することができますか？
function blockmove(){
$('.block').animate({top: '100px'}, {duration: 1000}).animate({width: '0'});
setTimeout(() => {
$('p').text('Done');
}, 1400);
};
blockmove();html, body {
margin: 0;
}
.block {
background-color: red;
width: 100px;
height: 100px;
display: block;
position: relative;
}
p {
position: absolute;
top: 1em;
right: 1em;
text-align: right;
display: block;
margin: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
</div>
<p></p>2番目の '.animate（）'コールも終了する必要があり（デフォルトの継続時間は400msです）、1400msのタイムアウトを設定したいと思います。 –
@Justastudentありがとう:-)） –
私はあなたがコールバック引数をreciveと思います。あなたがアニメーションを実行する上での選択を知っているという仮定の下で
function blockmove(callback){
$('.block').animate({top: '100px'},{duration: 1000}).animate({width: '0'},
function(){
if(typeof callback === "function") callback();
});
};
* *あなたは '.animate（）'メソッドのコールバックを使用できないのはなぜ？それがここの解決策です。コールバックを使用しないと、アニメーションがいつ終了し、いつ次の関数を呼び出すかを知ることは容易ではありません。これはjQueryプラグインの一部ですか？コールバックを使用できない理由はないはずです... –
彼は実際に彼がそれをすることができないと言いました。 –
'.animate（）'を2回呼び出すと、最初のアニメーションの後に2番目のアニメーションがキューイングされるので、実際には意味があります。@RocketHazmat :-) –