Jquery/Javascript 애니메이션 문제

Question

안녕하세요, jquery로 너비가 증가하는 div가 있습니다. 너비가 100 %에 도달하여 무언가를 할 때가 되길 원합니다.

$(function() { 

    $('.play').click(function() { 

    $('.loader').animate({ 
     width: "100%" 
    },1500); 
    $('.video img').attr('src','css/images/movie-click.jpg') 
    $(this).hide(); 

    if($('.loader').width()==$('.video img').width()) { 

     $('.video img').attr('src','css/images/movie.jpg') 
    } 

}); 

if 문에 뭔가 이상한 점이 있습니다. 누군가가 나를 도울 수 있다면. 내 아이디어는 with가 100 %인지 확인하고, 정상이면 모든 것이 정상으로 돌아갑니다. (표시하려면 width = 0 %, img attr이 다릅니다.)

Answer 1

콜백을 animate으로 사용하십시오. 애니메이션이 끝난 후 코드를 실행하려면 :

$('.play').click(function() { 
    $('.loader').animate({ 
     width: "100%" 
    }, 1500, function() { 
     // any code here will run only after the animation is complete 
     $('.video img').attr('src', 'css/images/movie.jpg'); 
    }); 
    // any code here will run as soon as the animation starts, 
    // before it's completed 
}); 

Answer 2

클릭 기능의 코드는 한 번만 호출되므로 if 문은 애니메이션으로 계속 실행되지 않습니다. 대신, 단순히 .animate() 후 콜백에 그 논리를 추가하는 것은 완료 :

$('.loader').animate({ 
    width: "100%" 
},1500,swing, function() { 
    $('.video img').attr('src','css/images/movie.jpg'); 
}); 

Answer 3

뭔가에 옳지 않아 문이

이 사실 :-) 현재 코드는 단지 CSS 값을 비교하면 두 .width() 호출에 의해 반환 - 물론 거짓 될 것입니다.

애니메이션을 기다리는 것은 아닙니다. 애니메이션 코드가 비동기 인 경우 animate() 호출은 애니메이션을 시작하지만 즉시 반환됩니다 (버튼을 숨기고 조건을 평가하는 단계가 계속됩니다).

대신

는 animate에 콜백 함수를 통과, 애니메이션이 완료되면이 실행됩니다 그래서

$(function() { 
    $('.play').click(function() { 
     $(this).hide(); 

     var $img = $('.video img'); 
     $img.attr('src','css/images/movie-click.jpg'); 

     $('.loader').animate({ 
      width: "100%" 
     }, 1500, function() { 
      // executed after the animation 
      $img.attr('src','css/images/movie.jpg'); 
     }); 
    }); 
});