如何限制动画的高度(方向顶部)?

时间:2012-11-05 14:55:33

标签: javascript jquery jquery-animate

我想在使用箭头切换时限制动画的最大高度。试图编写一个函数,它将计算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>​

直播:http://jsfiddle.net/cxvec/2/

1 个答案:

答案 0 :(得分: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);
  }
});​

这是工作fiddle

我更改了箭头click函数中的逻辑,在css中,top元素的初始id=line属性设置为0px ......现在每当top = 0px - &gt; div位于第1 li因此,函数不执行,因此对于向下箭头...

注意:这可能是最好的解决方案,但它是解决方案之一