Question

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

然而，在列表中的第一项消失后，第一项的第二种“跳入位置”。我想知道是否有可能使第二个项目滑入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>

Answer 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>

Answer 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 */

Jquery在列表淡出后滑动以定位效果

2 个答案: