jquery - 如何使用 jquery 使一堆卡片从一个地方移动到另一个地方

Question

如何使用 jquery 使一堆卡片从一个地方移动到另一个地方

像这样的事情http://www.linkedin.com/

我试过了，但它不起作用：

   $( "#img2 li" ).each(function() {

    var el = $(this);

    // Make it static
    el.css({
        visibility: 'hidden', // Hide it so the position change isn't visible
        position: 'static'
    });

    // Get the static position
    var end = el.position();

    // Turn it back to absolute
    el.css({
        visibility: 'visible', // Show it
        position: 'absolute'
    }).animate({ // Animate to the static position
        top: end.top,
        left: end.left
    }, function() { // Make it static
        $(this).css('position', 'static');
    });
});

Answer 1

我不完全确定这是否是您想要的，但您可以简单地使用 switchClass。当然，在此示例中，您可以将有关位置的信息从 css 类移动到 javascript（您在示例中做了类似的事情）：

HTML：

<div class="demo">
    <div class="card card-position">Click this card</div>
    <div id="stack" class="stack-position"></div>
</div>

CSS：

.demo{
    width:600px;
    height:600px;
    border: 1px solid #333;
    margin:15px auto;
    padding:0;
    position: relative;
}

.card, #stack{
    width:110px;
    height:180px;
    border:1px solid #333;
    position:absolute;
}

.card{
    background: #CCC;
    z-index: 2;
}

.card-position{
    left:10px;
    top:10px;
}

#stack{
    background: #222;
    z-index: 1;
}

.stack-position{
    right:10px;
    bottom:10px;
}

JS：

$(document).ready(function(){
    $('.card').click(function(){
        var el = $(this);
        moveCard(el,350);   
    });
});

function moveCard(el,duration){
    el.switchClass( 
        "card-position", 
        "stack-position", 
        duration
    );
}

希望这对您有所帮助。

编辑：哦，请记住 switchClass 需要 jQuery UI。