如何根据位置数组来动画项目数量

Question

我要实现的目标是根据位置数组移动DIV位置。对象的数量未知可能在4到20之间。

一次仅显示4个元素。

要清楚，我有4个不同的位置，每次（就像每4秒一样）项目都会更改位置，然后离开场景。（下面，数字是代表项目，字母是位置）

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: a
Items: 1 2 3 4 5 6 7 8 9 10
Posi.: b a
Items: 1 2 3 4 5 6 7 8 9 10
Posi.: c b a
Items: 1 2 3 4 5 6 7 8 9 10
Posi.: d c b a
Items: 1 2 3 4 5 6 7 8 9 10
Posi.: - d c b a
Items: 1 2 3 4 5 6 7 8 9 10
Posi.: - - d c b a

这些是位置;

var positions = [
    { top: 0,   left: 1100, zoom:70 },//(out of scene)
    { top: 0,   left: 420,  zoom:70 },
    { top: 185, left: 217,  zoom:80 },
    { top: 310, left: 0,    zoom:100},
    { top: 646, left: 210,  zoom:80 },
    { top: 800, left: 210,  zoom:80 } //(out of scene)
];

这是我到目前为止的地方。我相信我被困。似乎有效，但它被打破了。

var lastItemNo = -1;
var lastAnimation = 0;
var visibleItems = Array();
function tick(){
    visibleItems[visibleItems.length] = (lastItemNo+1);
    if((lastItemNo+1) == items.length){
        lastItemNo = -1;
    }else{
        lastItemNo++;
    }
    if(visibleItems.length>6){
       var removedItem = visibleItems.shift();
       $(".left .holder > .tweet").eq(removedItem).attr("data-pos",0).css({
            top:positions[0].top,
            left:positions[0].left,
            zoom:positions[0].zoom+"%",
        });
    }
    for(var i=0;i<visibleItems.length;i++){
//        console.log($(".left .holder > .tweet").eq(i).attr("data-pos"));
    }
    $.each(visibleItems,function(i,el){
        var currentItem = $(".left .holder > .tweet").eq(el);
        console.log(el);
        console.log(parseInt(currentItem.attr("data-pos"))+i);
        currentItem.animate({
            top:positions[parseInt(currentItem.attr("data-pos"))].top,
            left:positions[parseInt(currentItem.attr("data-pos"))].left,
            zoom:positions[parseInt(currentItem.attr("data-pos"))].zoom+"%",
        });
        currentItem.attr("data-pos", parseInt(currentItem.attr("data-pos"))+1 )

    });
    clog("tick");
}

html是;

<div class="left">
    <div class="holder">
        <div class="tweet" data-pos="0">
            <div class="avatar">
                <img class="user" src="https://pbs.twimg.com/profile_images/478523550886658048/rLUgKkv7_normal.png" boder="0">
                <div class="mask"><img src="/theme/images/avatar_mask.png" boder="0"></div>
            </div>
            <div class="text">
                <div class="username">Software AG Tu00fcrkiye <small>@SoftwareAGTR</small></div>
                <div class="tweet">TEXT</div>
            </div>
        </div>
        <div class="tweet" data-pos="0">
            <div class="avatar">
                <img class="user" src="https://pbs.twimg.com/profile_images/478523550886658048/rLUgKkv7_normal.png" boder="0">
                <div class="mask"><img src="/theme/images/avatar_mask.png" boder="0"></div>
            </div>
            <div class="text">
                <div class="username">Software AG Tu00fcrkiye <small>@SoftwareAGTR</small></div>
                <div class="tweet">TEXT!</div>
            </div>
        </div>
        <div class="tweet" data-pos="0">
            <div class="avatar">
                <img class="user" src="https://pbs.twimg.com/profile_images/528538190798675969/La7toYrv_normal.jpeg" boder="0">
                <div class="mask"><img src="/theme/images/avatar_mask.png" boder="0"></div>
            </div>
            <div class="text">
                <div class="username">Ece Vahapoglu <small>@ecevahapoglu</small></div>
                <div class="tweet">text https://t.co/JDfP6ATMWk</div>
            </div>
        </div>
        <div class="tweet" data-pos="0">
            <div class="avatar">
                <img class="user" src="https://pbs.twimg.com/profile_images/581787648584511488/Kxy-mZGu_normal.jpg" boder="0">
                <div class="mask"><img src="/theme/images/avatar_mask.png" boder="0"></div>
            </div>
            <div class="text">
                <div class="username">Fatih Mert Esmer <small>@mertesmer</small></div>
                <div class="tweet">#DASummit15 http://t.co/mpnBIh8zJK</div>
            </div>
        </div>
        <div class="tweet" data-pos="0">
            <div class="avatar">
                <img class="user" src="https://pbs.twimg.com/profile_images/475291049724620800/TmAbgWKF_normal.jpeg" boder="0">
                <div class="mask"><img src="/theme/images/avatar_mask.png" boder="0"></div>
            </div>
            <div class="text">
                <div class="username">Agah Alptekin <small>@AgahAlptekin</small></div>
                <div class="tweet">RT @digitalage: TEXT ://t.…</div>
            </div>
        </div>
    </div>
</div>

Answer 1

使用问题所定义的相同的positions数组：

var unusedItems = $('.left > .holder > .tweet').get(),
    usedItems = [];
// Initially hide all the items.
$(unusedItems).css({ top: positions[0].top, left: positions[0].left, zoom: positions[0].zoom + "%" });
function tick() {
    // If the usedItems array is full, remove the lead item and add it back
    // to the unusedItems array (as long as the item isn't null).
    if (usedItems.length == positions.length) {
        var item = usedItems.shift();
        if (item) {
            unusedItems.push(item);
        }
    }
    // Add an unused item to the usedItems array if there is one.
    // Otherwise add null as a placeholder.
    usedItems.push(unusedItems.shift() || null);
    // Loop through the usedItems array and animate the items to their
    // new positions, skipping the null placeholders.
    $.each(usedItems, function(i, item) {
        if (item) {
            var $item = $(item),
                position = positions[usedItems.length - 1 - i];
            $item.animate({ top: position.top, left: position.left, zoom: position.zoom + "%" });
        }
    });
}

如果项目数量等于或大于职位数量，则不会有任何null占位符。

null占位符和以下代码行是将职位与项目相关联的：

position = positions[usedItems.length - 1 - i];

jsfiddle