js .resize 이벤트를 사용하는 이상한 지연

Question

실례합니다. 제 질문은 어리석은 일일 수 있습니다. 그러나 저는 스크립트 작성의 초보자이며, 실제로 도움이 필요합니다. 버튼을 눌렀을 때 페이지 위로부터 아래로 슬라이드하기를 원하고, 다시 버튼을 누르면 뒤로 슬라이드합니다. 이 요소는 배치 된 컨테이너의 100 %를 채워야하므로 처음에는 .css ('height')로 컨테이너 높이를 모아서이 값을 요소 크기와 위치로 설정합니다. 그런 다음 몇 가지. 완벽한 효과를 얻습니다.

$(document).ready(function(){ 
    //gather dimentions 
    var x=($("#screenctr").css("height"));  
    var y=parseFloat(x); 
    var z=(y*-1 + 'px'); 
    $(".roll").css("height", x); 
    $(".roll").css("top", z); 
    //slides from above 
    $(".bloop").click(function(){ 
    $(".roll").animate({ 
     top:'0px'}, "slow"); 
    $(".bloop").css("display","none"); 
    $(".bzook").css("display","block"); 
    }); 
    //slides back 
    $(".bzook").click(function(){   
    $(".roll").animate({ 
     top:z}, "slow"); 
    $(".bzook").css("display","none"); 
    $(".bloop").css("display","block"); 
    }); 
    }); 

잘 작동합니다. 또한 창 크기가 조정될 때 크기와 위치를 변경하려고합니다. 그래서 나는 같은 스크립트를 작성한다. $(window).resize(function(){}

그것은 여전히 ​​효과가 있지만 매우 이상하다. 처음에는 페이지가로드 될 때 모든 것이 정상이며 처음 크기가 조정 된 후 제대로 페이지에서 벗어납니다. 그러나 그 이후로 숨어있을 것으로 예상 될 때 몇 초 동안 아무 것도 일어나지 않고 아주 천천히 위로 끌기 시작합니다. 아래로 다시 - 아무런 문제없이, 다시 - 오랜 지연 후 드레싱. 사람이 원인이 무엇인지 압니까? 고맙습니다. 있다는 이유 $ (창)의 기능 .resize()는 것, http://production.zukaty.ru/

Answer 1

당신은 $에 .animate() 메소드를 사용하여 (창) .resize() (.stop 추가) 방법 : 여기

페이지입니다 .stop()은 이전 애니메이션을 중지하므로 다음과 같이 사용하십시오.

$(window).resize(function(){ 
    $(".roll").stop().animate({ ... }); 
} 

이렇게하면 문제가 해결됩니다.