1

現在、自分のサイトのリストの自動スクロール機能を実行しています。

ただし、リストの最初の項目が消えた後、2番目の1種類は、最初の項目の「位置にジャンプ」します。2番目のアイテムを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>
4

2 に答える 2

2

垂直メニュー項目を左側にスクロール/回転しますか?

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>
于 2012-11-27T08:03:15.340 に答える
0

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 */
于 2012-11-27T07:50:53.893 に答える