チェックボックスの順序を遅らせる必要があります

Question

このチェックボックスのスクリプトの遅延をチェックして、チェックされたアイテムの順序や向きを変更する前に、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); 
}); 

にタイマーを置くことを試みたが、失敗した...

Answer 1

正確に特定されない結果は、ある期待したものしかしあなた、.append()、.prependTo()でき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>

Answer 2

ここでは、動くアイテムのいくつかのフェードアニメーションがあるソリューションです。私はまた、あなたがタイマーをしようとしたが、それが失敗したと言うとき、あなたは何を意味する

$(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>