イベントを次に起こすテスト

ボタンをクリックするとイベントが次の行に伝播します。

by juner

HTML

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

CSS

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%;
}

JavaScript

(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);