나는이 페이지 전체에 jQuery .animate
을 사용하고 있습니다.이 한 줄만 제외하면 사용자가 "Goal Completed (완료)"메시지를 사용자에게 표시하지 않습니다. 메시지를 클릭합니다. 미스터리가 애니메이션 명령의 연결선에 있지만 전체 기능을 포함합니다. 나는 우아한 물건을 위해 .animate()
을 사용하고있다. 그런 다음 객체가 사용자의 시야에서 벗어나면 .css()
번 신속하고 더러워진다. 내가 팅겨보고 아무리 똑같은 것처럼 보이지만,이 한 div는 오랜 지연이있을 때까지 움직이지 않을 것이다. 통과 ...jQuery .animate()가 의도적으로 실행되기 전에 몇 초 기다림
물건은 이미 시도했다 : jQuery를의 사슬을 분리
1) 한 번에 하나씩에 명령 : -> 이 결과 : 모든 애니메이션이 같은에서 수행 처음에는 실행하기 전에 8 초 기다리는 중입니다.
2) 작성된 것과 똑같은 코드를 사용하지만, 페이지의 임의의 div에있는 스위치를 "#kbm"으로 변경하십시오. 정말 숨기려는 하나입니다 -> 결과 : 새로 선택한 사업부가 제대로 작동 모든 애니메이션이 올바른 순서로 적절한시기에 발생,
3) 재 배열되는 HTML
에서 요소의 순서를4) 대신 스크립트에서 .css
명령을 제거 absolute
5)의 position: relative
을 시도하고 그냥 모든 것을 .animate
를 사용
JAVASCRIPT :
function loadnextpage(response)
{
word = response["word"];
imgarray = response["imgarray"];
loadgame();
$("#kbm").animate({"top": "-340"},500,function(){
$("#kbm").css("top","-1000px");
$(".key").animate({"left": "0px"},1000,function(){
$("#keyboard").css("overflow", "visible");
});
});
}
HTML :
<body>
<div id="pagec">
<div id="mainc">
<div id="wordpic"><div id="wordpicbg" class="bg"></div></div>
<div id="wordblanks"><div id="wordblankbg" class="bg"></div></div>
<div id="keyboard">
<div id="keyboardbg" class="bg"></div>
<div id="kbm"><img src="i/medal.png"><img src="i/arrow.png" id="arrow" onclick="loadnext()"></div>
</div>
</div>
</div>
</body>
CSS :
#kbm
{
display: inline-block;
position: absolute;
left: 340px;
top: -1000px;
width: 500px;
height: 340px;
}
'내가 비틀 거든 상관없이,이 한 div는 오랜 지연이 경과 할 때까지 움직이지 않을 것입니다 ...'div는 무엇입니까? – Nope
#kbm -하지만 모든 애니메이션 명령에 .stop()을 추가하여 문제를 해결했다고 생각합니다. 불행히도 나는 아직도 이것이 작동하는 이유를 모른다. – pinhead