それらのアニメーションが増加する10divを追加する必要があります。次々と登場する必要があります。私はこのコードを持っています
$('#bluebutton').click(function() {
for (var i = 0; i < 10; i++) {
var t = $('<div/>')
t.css('background-color', 'blue');
t.css('float', 'left');
t.css('border', '1px solid white');
t.appendTo(gallery);
t.animate({
width: 100,
height: 100
}, 400, function() {
// Animation complete.
});
}
});
しかし、10個のdivすべてが一緒に追加されています。更新：完全なコールバックを追加しました。
そのために完了コールバックを使用できます。
var gallery = $("#gallery");
$('#bluebutton').click(function() {
var i = 0;
addDiv();
function addDiv() {
var t = $('<div/>')
t.css('background-color', 'blue');
t.css('float', 'left');
t.css('border', '1px solid white');
t.appendTo(gallery);
++i;
t.animate({
width: 100,
height: 100
}, 400, i < 10 ? addDiv : $.noop);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="bluebutton" value="Click me" type="button">
<div id="gallery"></div>最後のビットに注意してください：i < 10 ? addDiv : $.noop。$.noopはjQueryが提供する関数であり、何も実行しないため、「iが10未満の場合はaddDiv、アニメーションが完了したときに呼び出します」と言います。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加