jquery first slide out, 클릭하면 끝났을 때

Question

Me. 미끄럼은 매력처럼 작동합니다. 하지만 스크립트를 확장하고 싶습니다. 그 상자가 빠져 나가고, 끝나면 클릭 한 페이지를로드하고 싶습니다.

슬라이딩 아웃 부분이 잘 작동하지만 페이지가 항상 빠르게로드됩니다. 내가 지연, 일시 정지, 그리고 훨씬 더 많은 것들을 시도했지만, jquery noob 이후로 나는 올바른 타이밍에서 작업 할 수 없거나 올바르게 코딩했다고 확신한다.

최신 상자를 화면 밖으로 밀어 낸 후 window.location을 가져옵니다. 이는 페이지에 가변적 인 상자가 포함될 수 있기 때문입니다.

몇 가지 팁과 조언을하시기 바랍니다. jsFiddle

편집 : 여기

$("a").click(function(){ var linkToGo = $(this).attr("href"); $(".slidingbox").each(function(index){ $(this).delay(index * 50) .animate({left: "-=940px", opacity: "0.9"}, 500, function() {document.location(linkToGo);}); }); return false; }); 

가 jsFiddle에 대한 링크와 코드의 현재 상태입니다 (Sohnee에 의해 제안 변경 후)

JQuery와 : 아래

내 코드입니다 : 페이지가로드되지 않고 애니메이션이 완료되지 않습니다. 이것은 내가 다시 받고있어 오류가

catch되지 않은 형식 오류 :

큰 소리로 생각 :

개체 번호의 속성 '위치'

편집 2는 함수가 아닙니다

return false 규칙을 제거하면 스크립트 기능이 다시 작동하지만 페이지가 호출 된 페이지의 초기 단계로 이동하는 것으로 보입니다. false를 반환하면 링크의 기본 동작이 작동하지 않는 것입니다. 그래서 모든 것이 의미가 있습니다. 경고에 대한 위치 규칙을 바꾸면 경고가 계속 호출되고 스크립트가 멈추는 것을 볼 수 있습니다.

사용 최종 코드 :

$("a").click(function(){ 
     var linkToGo = $(this).attr("href"); 

     var slidingBoxes = $(".slidingbox"); 
     var slidingBoxCount = slidingBoxes.length; 
     var animationCount = 0; 

     $(".slidingbox").each(function(index){ 
      $(this).delay(index * 50) 
       .animate({left: "-=940px", opacity: "0.9"}, 250, 
        function() { 
         animationCount++; 
         if (animationCount == slidingBoxCount) { 
          document.location = linkToGo; 
         } 
        }); 
     }); 
     return false; 
    }); 

Answer 1

원래 대답 : 당신은

에 따라 ...이 애니메이션에 대한 콜백으로 위치 변화를 이동 할 수

새로운 답을 얻을 수 있습니다

• 일련의 상자에 애니메이션을 적용하고 마지막 페이지에서 새 페이지를로드하려는 경우 ...

  var sildingBoxes = $(".slidingbox"); 
  var slidingBoxCount = slidingBoxes.length; 
  var animationCount = 0; 
  
  $(".slidingbox").each(function(index){ 
      $(this).delay(index * 50) 
       .animate({left: "-=940px", opacity: "0.9"}, 500, 
        function() { 
         animationCount++; 
         if (animationCount == slidingBoxCount) { 
          document.location = linkToGo; 
         } 
        }); 
  });