在更改已检查项目的顺序和方式之前,我需要将此复选框脚本延迟1-2秒。
<ul>
<li><label><input type="checkbox" id="one" />One</label></li>
<li><label><input type="checkbox" id="two" />Two</label></li>
<li><label><input type="checkbox" id="three" />Three</label></li>
<li><label><input type="checkbox" id="four" />Four</label></li>
<li><label><input type="checkbox" id="five" />Five</label></li>
</ul>
脚本
var list = $("ul"),
origOrder = list.children();
list.on("click", ":checkbox", function() {
var i, checked = document.createDocumentFragment(),
unchecked = document.createDocumentFragment();
for (i = 0; i < origOrder.length; i++) {
if (origOrder[i].getElementsByTagName("input")[0].checked) {
checked.appendChild(origOrder[i]);
} else {
unchecked.appendChild(origOrder[i]);
}
}
list.append(checked).append(unchecked);
});
试图打开计时器,但失败了......
答案 0 :(得分:0)
虽然您可以.prependTo()
,.append()
,setTimeout()
var list = $("ul"),
origOrder = list.find("li"),
duration = 1000,
timeout = null;
list.on("click", ":checkbox", function() {
if (timeout) clearTimeout(timeout);
var i, checked = [],
unchecked = [];
for (i = 0; i < origOrder.length; i++) {
if (origOrder.eq(i).find(":checked").length) {
checked.push(origOrder[i]);
} else {
unchecked.push(origOrder[i]);
}
}
timeout = setTimeout(function() {
$(checked).prependTo(list);
list.append(unchecked);
}, duration)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ul>
<li><label><input type="checkbox" id="one" />One</label></li>
<li><label><input type="checkbox" id="two" />Two</label></li>
<li><label><input type="checkbox" id="three" />Three</label></li>
<li><label><input type="checkbox" id="four" />Four</label></li>
<li><label><input type="checkbox" id="five" />Five</label></li>
</ul>
答案 1 :(得分:0)
这是一个带有移动项目的淡入淡出动画的解决方案。我还改了一些代码来使用jQuery代替DOM方法
$(function () {
var $list = $('ul');
var $items = $list.children();
var timer = -1;
function reorder() {
$items.each(function() {
if ($(this).find('input:checkbox:checked').length) {
$list.append($(this));
}
});
$items.each(function() {
if ($(this).find('input:checkbox:not(:checked)').length) {
$list.append($(this));
}
});
}
$list.on("click", ":checkbox", function () {
var $item = $(this).closest('li');
clearTimeout(timer); // cancel previous timeout
timer = setTimeout(function () {
// fade out clicked item
$item.fadeOut(400, function () {
// when faded out, reorder the items
reorder();
// fade in clicked item at its new position
$item.fadeIn(400);
});
}, 500);
});
// At page load, also reorder, as some browsers retain previous checkmarks
reorder();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><label><input type="checkbox" id="one" />One</label></li>
<li><label><input type="checkbox" id="two" />Two</label></li>
<li><label><input type="checkbox" id="three" />Three</label></li>
<li><label><input type="checkbox" id="four" />Four</label></li>
<li><label><input type="checkbox" id="five" />Five</label></li>
</ul>