使用JQuery Mobile来滑动和删除列表元素

Question

我正在尝试使用简单列表设置的JQuery Mobile页面：

当我单击列表元素时，它们会突出显示并通过id存储到本地数组中。是否有一种简单（或不那么简单）的方法使所选元素在屏幕右侧滑动，其余元素崩溃以填补空白？

相关代码：

var selectedItems = []; // This is updated as items are selected

var deleteButtonTapped = function() {
    // code here
};

编辑：如果它有任何针对性，在页面的实际实现中，我填充列表的项目将从数据库中提取，因此我将能够重新加载页面，删除的元素将不再出现了。

Answer 1

jsFiddle - 这接近你正在寻找的...... 使用.animate()

编辑：添加代码......

.animate()函数说，如果左边的元素属性为0，则将其向右移动多个像素，然后使用.fadeOut()函数隐藏它。如果需要，也可以使用相同的公式将元素滑回到位。

HTML

<ul id="list" data-role="listview">
    <li>Acura</li>
    <li>Audi</li>
    <li>BMW</li>
    <li>Cadillac</li>
    <li>Ferrari</li>
</ul>
<button id='btnDelete'>Delete</button>

CSS

.yellow{
    background-color: yellow;
}

的jQuery

$('#list li').click(function(){
    $(this).addClass('yellow'); 
});

$('#btnDelete').click(function(){
    $('.yellow').each(function(){
       $(this).animate({ marginLeft: parseInt($(this).css('marginLeft'),10) === 0 ?   $(this).outerWidth() : 0 }).fadeOut('fast');
    });
});