怎樣才能讓卡使用jQuery

Question

移動從一個地方到另一個地方堆的效果怎樣才能讓卡片堆棧從一個地方移動到另一個使用jQuery

SOMT這樣的事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。