Question

我希望从左到右为html列表设置动画，反之亦然。但是当我点击右键时它正在工作，但它正在替换列表元素（没有动画发生）。我想显示平滑动画，显示li元素从左到右或从右到左移动。

我试过

$elements.hide();
$elements.slice(counter, counter + showNum).show("fast");

但它仍然可以取代李的。

这是我的fiddle

Answer 1

对您而言，最简单的方法可能是将position:relative分配给您的div [{1}}和itemsListBox到您的列表position:absolute。然后使用jQuery动画，您可以根据需要将其设置为向左或向右动画。

查看您的更新小提琴： http://jsfiddle.net/AtweK/1/

另一种变体： http://jsfiddle.net/AtweK/2/

相关的css ：

ul

动画的代码：

#itemsListBox {
    position: relative;
    height: 120px; width: 99%;
    overflow: hidden;
}
#itemsListBox ul {
    list-style: none;
    position: absolute;
    top: 0; left: 0;
    height: 100%; width: 200%;
    margin: 0;
    white-space: nowrap;
}

希望有所帮助。

Answer 2

我相信你想要用滑动效果移动元素。它被称为轮播效果，有很多jQuery插件可以实现它，例如jCaraousel lite：http://www.gmarwaha.com/jquery/jcarousellite/

您可以在互联网上搜索类似的其他脚本。

Answer 3

这会产生很少的动画。

$elements.fadeOut();
$elements.slice(counter, counter + showNum).fadeIn("fast");

Answer 4

在“itemsListBox ul li”

中将css设置为position：relative

然后在jquery编辑

$("#rightArrow").click(function(){
 $( "#itemsListBox ul li" ).animate({
    left: "+=50px",
  },5000);
});
$("#leftArrow").click(function(){
 $( "#itemsListBox ul li" ).animate({
    right: "+=50px",
  },5000);
});

将持续时间设为您的要求

使用流畅的动画动画html列表

4 个答案: