[英]How can I make appear element by element with jQuery?
Sorry if I wrote something wrong :( 对不起,如果我写错了:(
I get success with this, but if I'd have a lot of paragraphs to show one by one? 我在此方面获得了成功,但是如果我有很多段落可以一一展示?
$(document).ready(
function(){
$("#click").click(
function() {
$("body").append("<p class='add'>joaoao</p>");
$("p.add").fadeIn("slow", function(){
$("body").append("<p class='add'>joaoao</p>");
$("p.add").fadeIn();
});
}
);
}
);
I would refactor the code a bit so that all the paragraphs already exist in the HTML. 我将对代码进行一些重构,以便HTML中已经存在所有段落。 Then, just show them one by one -- each time, show the first one that's still hidden.
然后,一个接一个地显示它们-每次显示仍隐藏的第一个。 I give the function a name to call it recursively as the callback.
我给函数起一个名称,以作为回调递归调用它。
$("#click").click(
function fadeIn() {
$("p:hidden").first().fadeIn("slow", fadeIn);
}
);
You can write simple sequencer: 您可以编写简单的音序器:
function startSequence(selector) { var idx = 0; var seq = $(selector); var id = window.setInterval( function() { if( idx >= seq.length ) { window.clearInterval(id); return; } $(seq[idx]).addClass("shown"); ++idx; }, 1000 ); } startSequence("p");
p { color:transparent; background-color:transparent; } p.shown { color:#000; background-color:gold; transition: all linear 1s; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>1111111111111111</p> <p>2222222222222222</p> <p>33333333333333</p> <p>344444444444444</p> <p>5555555555</p>
I got success with this example: 我通过以下示例获得了成功:
$(document).ready(
function(){
$("#click").click(
function() {
var count = prompt("How many joao's do you want to appear?");
var int = setInterval(
function(){
if(count==1){
clearInterval(int);
}
$("body").append("<p class='add'>joaoao</p>");
$(".add").fadeIn();
count--;
}
,800);
}
);
}
);
following p tag only appears after the last stop animation. 以下p标签仅在最后一站动画之后出现。 thanks for the help guys!!!
谢谢你们的帮助!!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.