2つの異なる要素で同時に2つのアニメーションを実行することは可能ですか?この質問の反対が必要です Jquery queuing animations 。
私はこのようなことをする必要があります...
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
ただし、これら2つを同時に実行します。私が考えることができる唯一のことは、アニメーションごとにsetTimeout
を使用することですが、それが最善の解決策だとは思いません。
はいあります!
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});
はい、同時に実行されます。同じ要素で2つのアニメーションを同時に実行したい場合はどうしますか?
$(function () {
$('#first').animate({ width: '200px' }, 200);
$('#first').animate({ marginTop: '50px' }, 200);
});
これにより、アニメーションがキューイングされます。それらを同時に実行するには、1行のみを使用します。
$(function () {
$('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});
同じ要素で2つの異なるアニメーションを同時に実行する他の方法はありますか?
私はjQueryのドキュメントで解決策を見つけたと信じています:
すべての段落を左スタイル50および不透明度1(不透明、可視)にアニメーション化し、500ミリ秒以内にアニメーションを完了します。 キューの外でも実行します。つまり、順番を待たずに自動的に起動します。
$( "p" ).animate({ left: "50px", opacity: 1 }, { duration: 500, queue: false });
単に追加します:queue: false
。
上記をそのまま実行すると、同時に実行されているように見えます。
テストコードは次のとおりです。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function () {
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
});
</script>
<div id="first" style="border:1px solid black; height:50px; width:50px"></div>
<div id="second" style="border:1px solid black; height:50px; width:50px"></div>
オブジェクトの値のアニメーション化に関するこの素晴らしいブログ記事を参照してください。その後、値を使用して、好きなものを100%同時にアニメーション化できます。
私はこれを使ってスライドイン/スライドアウトしました:
slide : function(id, prop, from, to) {
if (from < to) {
// Sliding out
var fromvals = { add: from, subtract: 0 };
var tovals = { add: to, subtract: 0 };
} else {
// Sliding back in
var fromvals = { add: from, subtract: to };
var tovals = { add: from, subtract: from };
}
$(fromvals).animate(tovals, {
duration: 200,
easing: 'swing', // can be anything
step: function () { // called on every step
// Slide using the entire -ms-grid-columns setting
$(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr');
}
});
}
Animateを連続して呼び出すと、同時に実行されているように見えることは事実ですが、根本的な真実は、非常に平行に近い状態で実行される別個のアニメーションであるということです。
アニメーションが確実に同時に実行されるようにするには、次を使用します。
$(function() {
$('#first').animate({..., queue: 'my-animation'});
$('#second').animate({..., queue: 'my-animation'}).dequeue('my-animation');
});
さらにアニメーションを「my-animation」キューに追加し、最後のアニメーションがデキューされた場合にすべてを開始できます。
乾杯、アンソニー
誰かを助けるために私の答えを投稿しても、最高評価の答えは私の不安を解決しませんでした。
次の[上からの回答]を実装すると、垂直スクロールアニメーションが前後に揺れました。
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});
W3 Schools Set Interval を参照して、私の問題、つまり「構文」セクションを解決しました:
setInterval(関数、ミリ秒、param1、param2、...)
{ duration: 200, queue: false }
という形式のパラメーターを使用すると、ゼロの期間が強制され、ガイダンスのパラメーターのみが確認されました。
長いことと短いこと、これが機能する理由を理解したい場合、リンクを読んだり、間隔で期待されるパラメータを分析したい場合は、私のコードです:
var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;
function configureRepeats() {
window.setInterval(function () {
autoScroll($scrollDiv, $scrollSpeed);
}, $interval, { queue: false });
};
「autoScroll」は次のとおりです。
$($scrollDiv).animate({
scrollTop: $($scrollDiv).get(0).scrollHeight
}, { duration: $scrollSpeed });
//Scroll to top immediately
$($scrollDiv).animate({
scrollTop: 0
}, 0);
ハッピーコーディング!