Question

我在div容器holder中为几个图像元素子项设置动画...它们将逐渐从屏幕的顶部落到底部

我想模拟积累......意思是，如果一幅图像与另一幅图像相交，它将位于其上方并停止移动（图片雪落下并累积）

我想这样做的方法是遍历每个子图像并为其位置设置动画...然后循环遍历每个兄弟并检查是否有交叉点...但当然这个双循环提供了糟糕的性能......有什么想法吗？

function update () {
            var myInterval = null;
            clearInterval(myInterval);
            myInterval = setInterval(function() {
                $("#holder > img").each(function() {    
                    $(this).css({top: $(this).position().top+=3});  

                    var $el = $(this); //bind context
                    $el.siblings().each(function() {
                        if ($el.position().top >= $(this).position().top) {
                            log("INTERSECT");
                        }
                    });
                });
            }, 10);
        }

Answer 1

需要考虑两件事：

您似乎正在尝试自己制作动画，一步一步。使用jQuery可能更容易。animate()代替。
当布局引擎可以为您执行此操作时，无需检查交叉点。只需将图像放在需要的位置，但最初看不到它们。例如，position: relative;和bottom: someVeryBigNumber;。然后将它们设置为最终位置。

<div id="container">
    <div id="droppableWrapper">
        <div class="droppable"></div>
        <div class="droppable"></div>
        <div class="droppable"></div>
        <div class="droppable"></div>
        <div class="droppable"></div>
    </div>
</div>

#container {
    position: relative;
}

#droppableWrapper {
    position: absolute;
    bottom: 0px;
}

.droppable {
    position: relative;
    bottom: 1000px; /* Enough to be out of the screen */
}

var stack = new Array();

$(".droppable").each(function(){
    // Note that the order of the stack 
    // is the inverse of the visual "stack" effect.
    stack.push(new Droppable($(this)));
});

startDropping();

function startDropping(){
    dropNext();
}

function dropNext(){
    var droppable = stack.pop();
    if(droppable){
        droppable.drop().done(dropNext);
    }
}

function Droppable(domElem) {
    function drop(){
        return domElem.animate({
            bottom :"0px"
        },{
            duration: 1000
        }).promise();
    }
    this.drop = drop;
}

这是一个小提琴： fiddle

使用jQuery用户界面的超级用户，如果您正在寻找的话： fiddle

模拟DOM元素的积累

1 个答案: