Jquery滚动动画

Question

我被分配了一些工作，我必须在一些包含不同内容的 block (div)上实现一种老虎机类型的滚动。我想要做的是:每次单击按钮/链接时，我希望一列 4 个 block (div)向上移动等于每个 block 高度的距离。我已经能够提出以下基本功能(感谢此处的出色答案!):

HTML

    <div class="slot" id="slot1">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block last">4</div>
</div>
<div class="slot" id="slot2">
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>
    <div class="block last">8</div>
</div>
<div class="slot" id="slot3">
    <div class="block">9</div>
    <div class="block">10</div>
    <div class="block">11</div>
    <div class="block">12</div>
</div>
<div class="clear"></div>
<p><a href="#" id="nudge1">nudge1</a></p>
<p><a href="#" id="nudge2">nudge2</a></p>
<p><a href="#" id="nudge3">nudge3</a></p>

CSS

.block {
    height:58px;
    width:100px;
    color: #ccc;
    border: 1px solid #666;
    position:absolute;
}
.slot {
    height: 176px;
    width:100px;
    border: solid 1px black;
    position: relative;
    overflow: hidden;
    float:left;
}
.clear {
    clear:both;
}

p {
    display:inline;}
}

JS

$(document).ready(function() {

    $(".block").last().addClass("last");
    $(".slot").each(function() {
        var i = 0;
        $(this).find(".block").each(function() {
            var $this = $(this);
            $this.css("top", i);
            i += $this.height();
        });
    });

    $('#nudge1').on('click',function() {
       var countScrolls = $('.slot .block').length;
        for (var i=0; i < countScrolls; i++) {
        var top = parseInt($('#slot1 .block:nth-child(' + i + ')').css("top"));
    if (top < -58) { 
        var $lastEle = $('#slot1 .block:nth-child(' + i + ')').closest('.slot').find(".last");
        $lastEle.removeClass("last");
        $('#slot1 .block:nth-child(' + i + ')').addClass("last");
        var top = (parseInt($lastEle.css("top")) + $lastEle.height());
        $('#slot1 .block:nth-child(' + i + ')').css("top", top);
    }
    $('#slot1 .block:nth-child(' + i + ')').clearQueue().stop().animate({
        top: (parseInt(top) - 58)
    }, 100, 'linear');
        }
        });

        $('#nudge2').on('click',function() {
       var countScrolls = $('.slot .block').length;
        for (var i=0; i < countScrolls; i++) {
        var top = parseInt($('#slot2 .block:nth-child(' + i + ')').css("top"));
    if (top < -58) { 
        var $lastEle = $('#slot2 .block:nth-child(' + i + ')').closest('.slot').find(".last");
        $lastEle.removeClass("last");
        $('#slot2 .block:nth-child(' + i + ')').addClass("last");
        var top = (parseInt($lastEle.css("top")) + $lastEle.height());
        $('#slot2 .block:nth-child(' + i + ')').css("top", top);
    }
    $('#slot2 .block:nth-child(' + i + ')').clearQueue().stop().animate({
        top: (parseInt(top) - 58)
    }, 100, 'linear');
        }
        });

    $('#nudge3').on('click',function() {
       var countScrolls = $('.slot .block').length;
        for (var i=0; i < countScrolls; i++) {
        var top = parseInt($('#slot3 .block:nth-child(' + i + ')').css("top"));
    if (top < -58) { 
        var $lastEle = $('#slot2 .block:nth-child(' + i + ')').closest('.slot').find(".last");
        $lastEle.removeClass("last");
        $('#slot3 .block:nth-child(' + i + ')').addClass("last");
        var top = (parseInt($lastEle.css("top")) + $lastEle.height());
        $('#slot3 .block:nth-child(' + i + ')').css("top", top);
    }
    $('#slot3 .block:nth-child(' + i + ')').clearQueue().stop().animate({
        top: (parseInt(top) - 58)
    }, 100, 'linear');
        }
        });

});

Here是一个更好的引用 fiddle 。单击“微移”会使 block 以动画方式向上移动，高度等于每个 block 的高度。我的问题是，现在一次只能显示两个 block ，而且我不知道如何显示更多 block (特别是 3 个 block )。谁能建议我一种方法来做到这一点？

Answer 1

这怎么样？ Demo 。使其变得更加简单、可读和可扩展。抱歉，我无法在当前位置访问 jsfiddle。

HTML:

<div class="slot" id="slot1">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
</div>
<div class="slot" id="slot2">
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>
    <div class="block">8</div>
</div>
<div class="slot" id="slot3">
    <div class="block">9</div>
    <div class="block">10</div>
    <div class="block">11</div>
    <div class="block">12</div>
</div>

<div class="clear"></div>

<div class="slotActionWrapper">
    <div class="slotActions">
        <a href="#" id="nudge1Up">&uarr;</a>&nbsp;
        <a href="#" id="nudge1Down">&darr;</a>
    </div>
    <div class="slotActions">
        <a href="#" id="nudge2Up">&uarr;</a>&nbsp;
        <a href="#" id="nudge2Down">&darr;</a>
    </div>
    <div class="slotActions">
        <a href="#" id="nudge3Up">&uarr;</a>&nbsp;
        <a href="#" id="nudge3Down">&darr;</a>
    </div>
</div>

CSS:

.block {
    height:58px;
    width:100px;
    color: #ccc;
    border: 1px solid #666;
    float:left;
}

.slot {
    height: 176px;
    width:100px;
    border: solid 1px black;
    position: relative;
    overflow: hidden;
    float:left;
}

.slotActionWrapper {
    width: 306px;
}

.slotActions {
    width: 102px;
    text-align:center;
    float: left;
}

.slotActions a,
.slotActions a:visited {
    text-decoration: none;
    color: black;
}

.clear {
    clear:both;
}

JavaScript:

$(document).ready(function()
{
    $('#nudge1Up').on('click',function()
    {
        $('#slot1 .block').first().animate({marginTop: "-=60"}, 300, function()
        {
            var firstElement = $(this).detach();
            firstElement.css('margin-top', '0');
            $('#slot1').append(firstElement);
        });
    });

    $('#nudge2Up').on('click',function()
    {
        $('#slot2 .block').first().animate({marginTop: "-=60"}, 300, function()
        {
            var firstElement = $(this).detach();
            firstElement.css('margin-top', '0');
            $('#slot2').append(firstElement);
        });
    });

    $('#nudge3Up').on('click',function()
    {
        $('#slot3 .block').first().animate({marginTop: "-=60"}, 300, function()
        {
            var firstElement = $(this).detach();
            firstElement.css('margin-top', '0');
            $('#slot3').append(firstElement);
        });
    });

    $('#nudge1Down').on('click',function()
    {
        var lastElement = $('#slot1 .block:last-child').detach();
        $('#slot1').prepend(lastElement);
        $('#slot1 .block:first-child').css('margin-top', '-60px');
        $('#slot1 .block:first-child').animate({marginTop: "+=60"}, 300);
    });

    $('#nudge2Down').on('click',function()
    {
        var lastElement = $('#slot2 .block:last-child').detach();
        $('#slot2').prepend(lastElement);
        $('#slot2 .block:first-child').css('margin-top', '-60px');
        $('#slot2 .block:first-child').animate({marginTop: "+=60"}, 300);
    });

    $('#nudge3Down').on('click',function()
    {   
        var lastElement = $('#slot3 .block:last-child').detach();
        $('#slot3').prepend(lastElement);
        $('#slot3 .block:first-child').css('margin-top', '-60px');
        $('#slot3 .block:first-child').animate({marginTop: "+=60"}, 300);
    });
});