Jquery从列表中淡出后滑动到位置效果答案

【问题标题】：Jquery Sliding to position effect after fadeout from listJquery从列表中淡出后滑动到位置效果
【发布时间】：2012-11-14 18:56:49
【问题描述】：

目前，我正在为我的网站上的列表设置自动滚动功能。

但是，在列表中的第一项消失后，第二项是第一项的'跳入位置'。我想知道是否可以让第二个项目滑入 jquery 中的位置，我该怎么做？以下是javascript代码和html。感谢您提前提供任何帮助。

Javascript：

    <script>
    var ad_refresh=setInterval(function(){
        var $target=$("div.manufacturer_list ul li:eq(1)");
        var position_1 = $target.position();
        $target.fadeOut('slow', function(){
            $target.appendTo('div.manufacturer_list ul').show();
        });
    },5000);
    </script>

生成的 HTML（示例）：

 <div class="manufacturer_list">  
    <ul>
       <li style="float:left;width:200px">Item 1</li>
       <li style="float:left;width:200px">Item 2</li>
       <li style="float:left;width:200px">Item 3</li>
       <li style="float:left;width:200px">Item 4</li>
       <li style="float:left;width:200px">Item 5</li>
            ...
            ...
            ...
    </ul>
 </div>

【问题讨论】：

感谢所有帮助的人。

标签： php javascript jquery html

【解决方案1】：

您想将垂直菜单项滚动/旋转到左侧吗？

http://jsbin.com/welcome/53677

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
    var ad_refresh=setInterval(function(){
        var $target=$("div.manufacturer_list ul li:first");
        $target.animate({
            marginLeft: -200,
            opacity: 0,
        }, function(){
            $target.css({
                marginLeft: 200
            }).appendTo('div.manufacturer_list ul').animate({
                marginLeft: 0,
                opacity: 1
            })
        });
    },1000);
    </script>

    <style type="text/css">
        .manufacturer_list {
          width: 800px;
          height: 40px;
          overflow: hidden;
        }
        .manufacturer_list li {
            float:left;
            width: 200px;
        }

    </style>
</head>
<body>
<div class="manufacturer_list">
    <ul>
        <li>foo1</li>
        <li>foo2</li>
        <li>foo3</li>
        <li>foo4</li>
        <li>foo5</li>
    </ul>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

我想你可以在 css 中使用转换属性来做到这一点。请让我知道它是否适合您

transition-property: all;
transition-duration: 0.5s;
-moz-transition-property: all; /* Firefox 4 */
-moz-transition-duration: 0.5s; /* Firefox 4 */
-webkit-transition-property: all; /* Safari and Chrome */
-webkit-transition-duration: 0.5s; /* Safari and Chrome */
-o-transition-property: all; /* Opera */
-o-transition-duration: 0.5s; /* Opera */

【讨论】：

嗨。我将它添加到
?