我想在使用箭头切换时限制动画的最大高度。试图编写一个函数,它将计算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>
答案 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
因此,函数不执行,因此对于向下箭头...
注意:这可能是最好的解决方案,但它是解决方案之一