【jQuery】スロットアニメーション３

テストにつぐテスト

by tea4two

HTML

<button id="left">&lt;&lt;</button> <button id="right">&gt;&gt;</button>
<div class="block"></div>

<button id="start">START!</button>
<ul class="cont">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
    <li>eee</li>
</ul>

CSS

.cont {
    position: relative;
    top: 50px;
    list-style: none;
    overflow: hidden;
    width: 50px;
    height: 120px;
    border: 1px solid #333;
}
.cont li {
    width: 48px;
    height: 48px;
    background: #efefef;
    border: 1px solid #ccc;
    position: absolute;
}
.block {
    width: 30px;
    height: 30px;
    background: #ccc;
    position: absolute;
}

JavaScript

var i = 0;
var po = $(".cont li");

//並べます
$(po).each(function() {
    var $this = $(this);
    $this.css("top", i);
    i += $this.height();
});

//START押したらアニメーションします
$("#start").click(function(){
    var pos = po.position();//
  $(po).animate({"top": "-60px"}, 1000);
    //if
});


//予備です
$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "normal");
});