Question

演示看起来很简单，当我点击按钮时它只有一次动画。问题是：如何将“目的地”再次更改为“来源”？（它应该有两组项目）

使用Javascript：

$('#source').quicksand( $('#destination li') );

HTML：

<ul id="source">
    <li data-id="iphone">iPhone OS</li>
    <li data-id="android">Android</li>
    <li data-id="winmo">Windows Mobile</li>
</ul>

<ul id="destination" class="hidden">
    <li data-id="macosx">Mac OS X</li>
    <li data-id="macos9">Mac OS 9</li>
    <li data-id="iphone">iPhone OS</li>
</ul>

Answer 1

这是您正在寻找的神奇代码：

function doQuicksand(){

var newDestination = $('#source').clone();
$('#source').quicksand( $('#destination li') , function(){

$('#source').attr("id","tempSource");
$('#destination').replaceWith(newDestination);
$('#source').attr("id","destination").css("display","none");
$('#tempSource').attr("id","source");

});

}

基本上因为流沙似乎用目的地替换了源，所以通常在运行它之后，源和目标都具有相同的内容。这段代码的作用是预先复制源代码，然后在流沙完成后再将其注入。

如何以这种方式使用jQuery Quicksand插件？

1 个答案: