div의 전체 높이를 알아 내기

내 웹 사이트에 간단한 수직 슬라이더를 만들고 싶습니다. 이 간단한 코드div의 전체 높이를 알아 내기

$('.down').click(function(){ 
    $('#container_slider_youtube').animate({ marginTop: '-=410px'}, 1000); 
}); 

$('.up').click(function(){ 
    $('#container_slider_youtube').animate({ marginTop: '+=410px'}, 1000); 
});

으로 내가 잘 작동 거기에 모든 위아래로 내 컨테이너를 밀어 수 있습니다. 하지만 내가 가지고있는 문제는 div의 위치를 완전히 엉망으로 만드는 위 또는 아래 버튼을 계속 누를 수 있다는 것입니다. 그렇다면이 문제를 해결하는 좋은 방법은 무엇입니까?

출처

2013-02-21 Peter Boomsma

아마도 상대 값에 의존하지 말고, 새로운 정적 값을 계산하여 .animate()에 할당하는 것이 좋습니다.

또한 이와 같은 응용 프로그램의 경우 margin 대신 CSS position 및 top을 사용하는 것이 더 간단하다는 것을 알았습니다. 몇몇 (오래된) 브라우저는 천 여개의 불길로 타는 부정적인 여백에 싫어하는 것처럼 보입니다.

// example 
var container = $('#container_slider_youtube'), 
    parent = container.parent(), 
    step = 410 
    ; 
$('.down').click(function() { 

    var currentTop = container.css('top'), 
     newTop = Math.max(0, currentTop - step) 
     ; 

    container.animate({ marginTop : newTop }, 1000); 

});

.up 클릭 수에 맞게 조정할 수 있습니다. 컨테이너 부모의 높이를 고려해야합니다 (대부분 .height() 사용). 당신이 CSS position 길을 갈 경우

는 컨테이너 부모가 적어도position:relative 있는지 확인하고 컨테이너는 뿐만 아니라 적어도 동일 함. 개인적으로 컨테이너를 position:absolute으로 설정했습니다.

출처

2013-02-21 11:37:36

div의 전체 높이를 알아 내기

답변

관련 문제