JQuery에서 콜백을 사용하는 방법?

Question

저는 JQuery에서 초보자입니다.하지만 정말 그걸 가지고 놀고 싶습니다. 나는 페이지를 만들고 있었고 느리게 시작되었지만 콜백을 사용하는 방법이 없었고 그것이 도움이 될 것이라고 생각합니다.

코드 나는이 같은 모습을 사용하고 있습니다 :

$(".navHome").click(function(){ 
    var div=$(".navHome"); 
    div.animate({left:'190px'},"fast"); 

    var div=$(".content"); 
    div.animate({width:'700px'},"slow"); 
    div.animate({height:'250px'},"slow"); 

    $(".content").load("home.html"); 

    var div=$(".xIcon"); 
    div.animate({width:'20px'},"slow"); 
    div.animate({height:'20px'},"slow"); 
}); 

그래서 내가 사업부 "navHome"를 클릭, 그것은 이동하고 "내용"사업부는/부하를 확장합니다. 그러나 고르지 않게 보입니다. 콜백은 필자가 필요로하는 것이지만 확실하지는 않다.

Answer 1

,이 콜백 함수를 사용하여 코드, 당신은 하나의 애니메이션 방법을 사용하여 여러 속성에 애니메이션을 적용 할 수 있습니다.

.animate (특성 [시간] [완화] [완전한])

$(".navHome").click(function(event){ 
    // event.preventDefault(); // prevents the default action of the event 
    $(this).animate({left:'190px'},"fast", function(){ 
     $(".content").animate({width:'700px', height:'250px'},"slow", function(){ 
      $(this).load("home.html", function(){ 
       $(".xIcon").animate({width:'20px', height:'20px'},"slow"); 
      }) 
     }) 
    }); 
}); 

Answer 2

콜백은 아마도 애니메이션이 "대기"하면서 서로 겹치면서 원하는대로되지 않을 것입니다.

너무 많은 일이 발생했기 때문에 고르지 않을 수 있습니다. 자바 스크립트 CSS 애니메이션은 특히 빠르지 않으며 자바 스크립트 엔진의 차이 때문에 대부분 브라우저에 의존합니다. 좀 더 부드러운 애니메이션을 원한다면, CSS가 하드웨어 가속을 사용하고 귀중한 자바 스크립트 리소스를 차지하지 않으므로 CSS 전환을 적용한 클래스를 추가 및 제거하고 나머지 응용 프로그램을보다 원활하게 실행할 수있는 방법을 제안하십시오.

var 키워드를 사용할 때마다 div을 다시 신고 할 필요가 없으며 개체 속성을 쉼표로 구분하여 여러 속성에 애니메이션을 적용하고 jQuery 메서드를 연결하여 다시 만들 필요가 없도록 할 수 있습니다 이처럼 DOM을 - 쿼리 : 당신은 같은 범위에서 변수를 여러 번 정의 안

$(".navHome").click(function(){ 

    $(this).animate({left:'190px'},"fast"); 

    $(".content").animate({width:'700px', height:'250px'},"slow") 
       .load("home.html"); 

    $(".xIcon").animate({width:'20px', height:'20px'},"slow"); 

}); 

Answer 3

이 시도 : 구문에서

$(".navHome").click(function(){ 

$(this).animate({left:'190px'},"fast"); 

$(".content") 
.animate({width:'700px'},"slow"); 
.animate({height:'250px'},"slow"); 

$(this).load("home.html"); 

$(".xIcon") 
.animate({width:'20px'},"slow"); 
.animate({height:'20px'},"slow"); 
}); 

봐 - 코드를 수정하고 더 쉽게 만들어야합니다!