如果小于总高度,则添加到div边距

时间:2014-04-30 14:21:28

标签: jquery animation slider margin

我正在尝试构建一个滑块,可以在点击时上下移动几个div。当我到达div的末尾时,我希望滑块停止。如果我们在最后一个div,我真的坚持这个检查。

我绝对定位了div,滑块容器的高度是通过将所有这些加在一起来计算的,然后我将使用边距来上下移动滑动容器。

如何在if语句中进行比较,margin-top +下一个div高度将小于总高度(即防止在一个方向上无限加入)?

if($('#slide-container').css({'marginTop': +=59} < $('#slide-container').height()) {
    // Go back to 0
}

其中59是移动div的高度,因此我们在每次点击时添加一个余量。这个if语句应该检查我们是否在最后一个。

谢谢,

1 个答案:

答案 0 :(得分:1)

我想我找到了一个有效的解决方案。您需要导入jQuery UI才能运行它。而且你必须编写一个以前的点击功能。但这是下一个功能:

http://jsfiddle.net/88wHu/2/

这里是代码:

$(document).ready(function(){
    var hideoptions = {  "direction" : "up",  "mode" : "hide"};
    var showoptions = {"direction" : "down","mode" : "show"};
    $('.webinar').not(':first-child').hide();
    $('.webinar:first-child').addClass('active-slide');
    $('span.next-arw').click(function(e){
        if($('.active-slide').next().length>0){
            console.log($('.active-slide').next());
            var current=$('.active-slide');
            var current_next=current.next();
            current_next.addClass('active-slide');
            current.removeClass('active-slide');

            current.effect( "slide", hideoptions, 400);            
            current_next.effect( "slide", showoptions, 400);          

        }
    });


});

希望这是一个帮助:)