애니메이션의 높이를 제한하는 방법 (위쪽 방향)?

Question

화살표를 사용하여 전환 할 때 애니메이션의 최대 높이를 제한하려고합니다. 함수를 작성하려고하면 div의 높이와 px의 단계가 계산됩니다. 그러나 이제는 변수에 대해 진절머리 나게됩니다.

var maxfloorh = $('.floor-switch').height(); 
var actualh = $('.floor-switch').height(); 
$('.floor-switch li').click(function() { 
    $('#line').animate({ 
     top: $(this).position().top 
    }); 
}); 
function floorarrs(numbr) { 
    switch (numbr) { 
     case 1: 
      //check here maxfloorh 
      $('#line').animate({ 
       top: '-=18' 
      }, 400, function() { 
       maxfloorh-'18'; 
       console.log(maxfloorh); 
      }); 

     break 
     case 2: 
       //check here maxfloorh 
      $('#line').animate({ 
       top: '+=18' 
      }, 400, function() { 
       maxfloorh+'18'; 
       console.log(maxfloorh); 
      }); 

     break 
    } 
} 
$('.arrw-up').click(function() { 
    floorarrs(1); 
}); 
$('.arrw-dwn').click(function() { 
    floorarrs(2); 
});​ 

HTML :

<div id="floors" style="margin:60px;"> 
    <div class="arrw-up"></div> 
    <div class="floor-switch"> 
     <div id='line'></div> 
     <ul> 
      <li>1</li> 
      <li>2</li> 
      <li>3</li> 
      <li>4</li> 
     </ul> 
    </div> 
    <div class="arrw-dwn"></div> 
</div>​ 

라이브 : CSS의 초기에게에 fiddle

내가 당신의 화살표 click 기능의 로직을 변경 한 http://jsfiddle.net/cxvec/2/ 여기

Answer 1

$('.arrw-up').click(function() { 
    if ($("#line").css("top") !== "0px") { 
    floorarrs(1); 
    } 
}); 

$('.arrw-dwn').click(function() { 
    if ($("#line").css("top") !== ""+($("#pagination li").length-1)*18+"px") { 
    floorarrs(2); 
    } 
});​ 

을하고있다 요소의 위도가 top 인 속성 이것은 가장 좋은 참고 수 있습니다 참고

... 아래쪽 화살표 있도록> 사업부 1 li 따라서 함수가 실행되지 않습니다 ANS에합니다 - top = 0px이 때마다 시간 id=line 지금 ... 0px 로 설정 솔루션이지만 솔루션 중 하나임