(function($){ $(function(){ $("#target").on("click","button",function(e,next){ next = next || 1; var $span = $("#tmp").clone() .removeAttr("id") .text(next); $(this) .stop() .closest("li") .addClass("move") .append($span) .end() .queue(function(){ $(this) .closest("li") .removeClass("right") .addClass("left") .end() .dequeue(); }) // → .animate({ "margin-left":"+=3em" },1000) .queue(function(){ $(this) .closest("li") .removeClass("left") .addClass("right") //次の行にイベントを起こす .next("li") .find("button") .trigger("click",[next+1]) .end() .end() .end() .dequeue(); }) // ← .animate({ "margin-left":"0" },1500) .queue(function(){ $span.remove(); $(this).dequeue(); }) .promise() .always(function(){ console.log("end",next); $span.remove(); $(this).closest("li").removeClass("move left right"); }); }); }); })(jQuery);
<h1>イベントを次に起こすテスト</h1> <p>ボタンをクリックするとイベントが次の行に伝播します。</p> <ul id="target"> <li><button>ぼたん①</button></li> <li><button>ぼたんⅱ</button></li> <li><button>ぼたんⅢ</button></li> <li><button>ぼたん㊃</button></li> <li><button>ぼたん⑸</button></li> <li><button>ぼたん陸</button></li> <li><button>ぼたん❼</button></li> <li><button>ぼたん➇</button></li> <li><button>ぼたん㈨</button></li> <li><button>ぼたん➓</button></li> </ul> <span id="tmp" class="no"></span>
html,body{ margin:0; padding:0; } h1{ width:100%; margin:0; background-color:green; color:white; font-weight:bold; } #target{ padding-left:0; } #target li>*{ height:100%; } #target li{ background-color:yellow; margin-bottom:2px; position:relative; padding:2px; padding-left:1em; list-style-type:none; overflow:hidden; height:100%; white-space: nowrap; } #target li.move{ background-color:orange; } #target li.left::before, #target li.right::before{ position:absolute; color:red; left:0; } #target li.left::before{ content:'▶'; } #target li.right::before{ content:'◀'; } #target li button{ width:8em; margin:2px; border:1px solid silver; background-color:gray; color:white; border-radius:1em; outline-radius:1em; } #target li .no{ padding-left:0.5em; padding-right:0.5em; background-color:blue; margin-left:2px; color:white; border-radius:100%; }