다음과 같은 배열이 있습니다.
var txt = new Array('1st', '2nd', '3rd');
이 배열을 루프에 넣고 각 텍스트를 (공통) div에 적용하고 애니메이션으로 표시 한 다음 다른 애니메이션으로 숨겨야합니다.
내가 한 일은 먼저 html div를 추가했습니다.
<div id="contentHolder"></div>
그런 다음 jQuery 코드에서 다음과 같이 썼습니다.
$.each(txt, function(index, value)) {
$("#contentHolder").empty().append(value).slideDown('slow').fadeOut('slow');
}
내가 얻는 것은 contentHolder div가 "3rd"로 채워지고 3 번 나타나고 사라진다는 것입니다! 텍스트가 루프에 적용되고 완료되면 애니메이션 대기열이 실행되는 것 같습니다.
코드는 다음과 같습니다. http://jsfiddle.net/fbgp2000/97ThY/2/
내가 필요한 것은 동일하지만 각 루프에서 다른 텍스트를 표시합니다.
누구든지 내가 놓친 것을 말해 줄 수 있습니까?
애니메이션이 완료되면 호출되는 콜백 함수를 사용해야합니다. 루프가 애니메이션보다 훨씬 빠르게 실행됩니다.
var $contentHolder = $('#contentHolder');
(function worm(i) {
$contentHolder.fadeOut(function() {
$(this).text( txt[i] ).slideDown(function() {
txt.length !== ++i ? worm(i) : '_the end';
});
});
})(0);
다시 시작하려면 :
worm( txt.length !== ++i ? i : 0 );
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다