在jQuery中添加滚动动画到列表答案

【问题标题】：Add scroll animation to list in jQuery在jQuery中添加滚动动画到列表
【发布时间】：2014-01-09 00:16:47
【问题描述】：

我有一个列表，如果您单击 prev next 它会左右移动，如this fiddle所示

HTML

    <div>
    <span id="prev">prev</span>
        <ul id="scrolllist">
            <li><img src="http://dummyimage.com/100x100/000000/fff"></li>
            <li><img src="http://dummyimage.com/100x100/f33636/fff"></li>
            <li><img src="http://dummyimage.com/100x100/0c5b9e/fff"></li>
            <li><img src="http://dummyimage.com/100x100/0c9e0c/fff"></li>
        </ul>
    <span id="next">next</span>
    </div>

CSS

    div {
        float: left;
        width: 550px;
    }
    li {
        float: left;
        list-style-type: none;
        margin: 0 5px;
    }
    #prev {
        cursor: pointer;
        float: left;
    }
    #next {
        cursor: pointer;
        float: right;
    }

    $(function () {
        $('#prev').click(function () {
            var first = $('#scrolllist li:first-child');
            $('#scrolllist li').parent().append(first).animate({ "left": "-=50px" }, "slow" );
        });
        $('#next').click(function () {
            var last = $('#scrolllist li:last');
            $('#scrolllist li').parent().prepend(last).animate({ "left": "+=50px" }, "slow" );
        });
    });

这可以按预期将它们移动，但是我想滚动列表项以使它们在单击方向上的影响类似于http://coolcarousels.frebsite.nl/c/58/中可以看到的效果

我需要做什么才能让它工作？

【问题讨论】：

您的移动方式。没有动画，因为没有任何东西在移动。您的附加或前置。
抱歉，您必须回到绘图板...您也不能移动对象，除非它们有位置。
如果你想要一个如何制作动画的例子，我有我构建的这个级联水平滑块，它可以帮助你理解实例化。 jsfiddle.net/cornelas/LCDXj

标签： javascript jquery css scroll jquery-animate

【解决方案1】：

正确操作的诀窍是将图像放置在隐藏的容器 div 中，然后根据需要将该容器向左或向右设置动画，克隆列表中的第一个或最后一个 img，然后根据方向附加或前置.

img 容器 div 必须放置在另一个具有明确高度和宽度的 div 中，并且溢出设置为隐藏。这可以防止用户看到宽 img 容器。

这是 HTML：

<div>
<span id="prev">prev</span>
<div class="scroll-container">
    <div class="img-container">
        <img src="http://dummyimage.com/100x100/000000/fff">
        <img src="http://dummyimage.com/100x100/f33636/fff">
        <img src="http://dummyimage.com/100x100/0c5b9e/fff">
        <img src="http://dummyimage.com/100x100/0c9e0c/fff">
    </div>
</div>
<span id="next">next</span>

还有 JavaScript：

$(function () {
$('#prev').click(function () {
    if(!$('.img-container').is(':animated')) {
        var first = $('.img-container img:first-child');
        var firstClone = first.clone();
        $('.img-container').append(firstClone);
        $('.img-container').animate({ "left": "-=110px" }, "slow", function() {
            first.remove();
            $('.img-container').css("left", "0");
        });
    }
});
$('#next').click(function () {
    if(!$('.img-container').is(':animated')) {
        var last = $('.img-container img:last-child');
        var lastClone = last.clone();
        $('.img-container').css("left", "-110px");
        $('.img-container').prepend(lastClone);
        $('.img-container').animate({ "left": "0" }, "slow", function() {
            last.remove();
        });
    }
});
});

注意每个函数开头的“如果没有动画”检查。这可以防止用户在动画完成之前再次运行函数（这会导致奇怪的错误）。

这是你的小提琴的修改版本：http://jsfiddle.net/fJqKV/17/

【讨论】：