콜백 내부 콜백

Question

콜백이 끝나면 다른 콜백을 실행하려고합니다. 그러나 웬일인지 그것을 즉시 모두하고있다. 여기

코드입니다 :

$('video#videopromo').bind('ended',function() 
{     
    $("#hero").fadeIn("slow", function() 
    { 
     $(this).css("visibility", "visible"); 
     $("#videopromo").css({zIndex: -1}); 
     $(this).css("display", "block"); 

    }); 
}); 

나는 이것이 가장 좋은 방법이 될 것입니다 즉시 표시 그것에 반대로 퇴색하는 #hero 하시겠습니까?

Answer 1

jsFiddle에 코드를 삽입하면 효과적입니다. 내가 display:none을 사용하는 반면에 당신은 당신의 CSS에 visibility:hidden을 사용했다고 의심합니다. 나는 당신이 그것을 필요로하지 않는다고 생각하고 조금 리팩터링했기 때문에 css() 코드를 주석 처리했다. 그러나 그것은 그대로 잘 동작한다.

#hero { display:none; } 

다음은 작동하는 일부 코드입니다 (위의 CSS와 마찬가지로 코드는 작동합니다).

$(document).ready(function(){ 
    $("#videopromo").bind('click',function(e){ 
     var videopromo = $(e.target); 
     console.log(e.target); 
     $("#hero").fadeIn("slow", function(){ 
       console.log("callback"); 
       //$(this).css({visibility:"visible",display:"block"}); 
       videopromo.css({zIndex: -1}); 
     }); 
    }); 
}); 

과 fiddle

여기

(시험에 '비디오'를 클릭)뿐만 아니라 visibility:hidden를 사용하여 동일한 않는 다른 fiddle을합니다.

$(document).ready(function(){ 

    $("#videopromo").bind('click',function(e){ 
     var videopromo = $(e.target); 
     console.log(e.target); 
     $("#hero").css({visibility:"visible"}) 
       .hide() 
       .fadeIn(500, function(){ 
         console.log("fully faded in now"); 
         videopromo.css({zIndex: -1}); 
       }); 
     }); 

}); 

Answer 2

.when 및 .done을 살펴보십시오. http://api.jquery.com/deferred.done/

이

http://api.jquery.com/jQuery.when/

뭔가 다른 일을 시작하기 전에 완료 될 때까지 기다릴 수 있습니다.

Answer 3

나는 @cirrus는 말에 확장 대신 내가 비디오 달러 (A $) ("#의 videopromo")을 준 요소를 숨김으로써 문제를 해결 CSS ("위치", "상대."); 에 표시되므로 콘텐츠가 동영상 뒤에 표시되지 않습니다. 일을 마치면 되돌아갑니다! HTML을 제공하십시오 당신의 도움이