左右动画列表项答案

【问题标题】：animate list items left and right左右动画列表项
【发布时间】：2013-07-16 16:17:30
【问题描述】：

我有一个带有 8 张图片的小图片幻灯片，但只显示 5 张图片，其他图片被隐藏。

这是html

<div id="itemsListBox">
    <ul>
        <li><img src="images/home-items/washing_machine.png" alt="" /></li>
        <li><img src="images/home-items/refrigerator.png" alt="" /></li>
        <li><img src="images/home-items/dishwasher.png" alt="" /></li>
        <li><img src="images/home-items/ovens_stoves_hobs.png" alt="" /></li>
        <li><img src="images/home-items/extractors.png" alt="" /></li>
        <li><img src="images/home-items/microwave_oven.png" alt="" /></li>
        <li><img src="images/home-items/coffee_makers.png" alt="" /></li>
        <li><img src="images/home-items/washer_dryer.png" alt="" /></li>
        <li><img src="images/home-items/tumble_dryer.png" alt="" /></li>
    </ul>
</div>

还有css：

#itemsListBox {
    position: absolute;
    top: 90px;
    width: 100%;
    padding: 0 10%;
    overflow: hidden;
}
#itemsListBox ul {
    white-space: nowrap;
    overflow: hidden;
}
#itemsListBox ul li{
    list-style-type: none;
    display: inline-block;
    width: 18%;
    margin: 1%;
}
#itemsListBox ul li img {
    width: 100%;    
}

我可以使用以下代码移动图像：

$("#rightArrow").click(function(e) {
        var curr =  $("#itemsListBox ul li:last");
        curr.parent().prepend(curr);
    });
$("#leftArrow").click(function(e) {
        var curr =  $("#itemsListBox ul li:first");
        curr.parent().append(curr);
    });

但我想用一些动画来做到这一点。有什么想法吗？

这是一个现场演示： http://jsfiddle.net/Bergkamp/shnyH/

【问题讨论】：

请比“某事”更具体。

标签： jquery html css jquery-animate styling

【解决方案1】：

你可以试试这样的：

在你的 css 中将你的图像位置设置为相对：

 img {position:relative;}

并且使用 Jquery 的 animate 函数来改变左侧位置，而不是 append 和 prepend。

   $("img").animate({ 
    left: "-=150px",
  }, "slow" );

查看编辑示例：

http://jsfiddle.net/z3PzC/

【讨论】：

【解决方案2】：

这是一个使用您的图像的向下/向上滑动动画示例：http://jsfiddle.net/Jag96/5VDTL/

这里的主要障碍是你隐藏了一些图像，一次只显示 5 个，所以你需要在第一个和第 5 个 li 元素上设置动画：

$("#itemsListBox ul li:nth-child(5)").slideUp("slow", function () {
    curr.hide().prependTo(curr.parent()).slideDown();
});

如果您想对动画进行更多自定义，也可以使用 jQuery .animate() 方法。

【讨论】：