2012-09-06 3 views
1

나는이 페이지 전체에 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; 
} 
+1

'내가 비틀 거든 상관없이,이 한 div는 오랜 지연이 경과 할 때까지 움직이지 않을 것입니다 ...'div는 무엇입니까? – Nope

+0

#kbm -하지만 모든 애니메이션 명령에 .stop()을 추가하여 문제를 해결했다고 생각합니다. 불행히도 나는 아직도 이것이 작동하는 이유를 모른다. – pinhead

답변

1

.stop() 애니메이션 큐는 다음 애니메이션으로 이동하기 전에 취소되어 있기 때문에이 문제를 방지 할 수 있습니다. 애니메이션 시간과 내장 지연 (.delay())은 애니메이션 큐에서 지연을 합산 할 수 있습니다. 특히 애니메이션 요소가 많은 요소의 경우 더욱 그렇습니다.

여기에 대한 자세한 내용은 (대기열에 관한 부분)을 참조하십시오.

관련 문제