<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="refly2.css">
<script type="text/javascript" src="jquery-2.0.0.js"></script>
<script type="text/javascript" src="refly.js"></script>
<title></title>
</head>
<body>
<div class="wrapper">
<div class="cell" id="cell0">0
<a class="up" href="javsscript:void(0)">up</a>
<a class="down" href="javascript:void(0)">down</a>
</div>
<div class="cell" id="cell1">1
<a class="up" href="javsscript:void(0)">up</a>
<a class="down" href="javascript:void(0)">down</a>
</div>
<div class="cell" id="cell2">2
<a class="up" href="javsscript:void(0)">up</a>
<a class="down" href="javascript:void(0)">down</a>
</div>
<div class="cell" id="cell3">3
<a class="up" href="javsscript:void(0)">up</a>
<a class="down" href="javascript:void(0)">down</a>
</div>
<div class="cell" id="cell4">4
<a class="up" href="javsscript:void(0)">up</a>
<a class="down" href="javascript:void(0)">down</a>
</div>
</div>
</body>
</html>
CSS
.wrapper {
width: 500px;
margin: 0 auto;
top: 200px;
position: relative;
}
.cell {
height: 48px;
line-height: 48px;
width: 500px;
border-top: 1px solid #000;
text-align: center;
position: absolute;
background-color: #fff;
overflow: hidden;
z-index: 2;
}
.cell:last-child {
border-bottom: 1px solid #000;
}
#cell0 {top: 0;}
#cell1 {top: 50px;}
#cell2 {top: 100px;}
#cell3 {top: 150px;}
#cell4 {top: 200px;}
.clone {height: 0;visibility: hidden;}
JS
$(function () {
$('.up').click(function(){
var cell = $(this).parent('.cell');
var cellOther = cell.prevAll('.cell');
cellOther.each(function(){
var top = $(this).css("top");
//var num = top.split('px')[0]
// $(this).data('top', parseInt(top));
var num2 = top.replace(/px/,"");
$(this).data('top', parseInt(top));
});
function up(){
var stayClone = cell.clone();
stayClone.insertAfter(cell);
var flyClone = cell.clone();
var firstChild = cell.parent().children()[0];
flyClone.insertBefore(firstChild);
var cellHeight = 48;
//var ttt = 0;
$('*').css("border-bottom","0");
flyClone.addClass('clone')
.attr('id','')
.animate({"height":cellHeight+"px"},{
duration: 500,
queue: false,
progress: function(animation, progress, remainingMs){
var h =Math.round(cellHeight * progress);
stayClone.css({"height":h +"px","z-index":"1","visibility":"hidden"});
flyClone.css({"height":48-h+"px","z-index":"1"});
$('.cell:last-child').css("border-bottom","1px solid #000");
cell.prev().css("border-bottom","1px solid #000");
cellOther.each(function(){
$(this).css({"top":$(this).data('top') + progress * 50 + 'px'})
});
//cellOther.css({"top":"+=0.35px",});
},
//step: function (n) {
// var d = 50 * (n - ttt)/cellHeight;
// cellOther.css({"top":"+=" + d + "px"});
// ttt = n;
//},
complete: function(){
stayClone.remove();
flyClone.remove();
$('*').css("border-bottom","0");
$('.cell:last-child').css("border-bottom","1px solid #000");
}
});
//cellOther.animate({"top":"+=50px"},500);
cell.insertBefore(firstChild).css({"z-index":"99","border-bottom":"1px solid #000"})
.animate({"top":"0"},500,function(){
$(this).css({"z-index":"1","border-bottom":"0"})
});
}
if(cell.prev().size() == 0){
alert('我已经是第一个了呢');
}else{
up();
}
});
$('.down').click(function(){
var cell = $(this).parent('.cell');
var cellOther = cell.nextAll('.cell');
cellOther.each(function(){
var top = $(this).css("top");
//var num = top.split('px')[0]
// $(this).data('top', parseInt(top));
var num2 = top.replace(/px/,"");
$(this).data('top', parseInt(top));
});
function down(){
var stayClone = cell.clone();
stayClone.insertBefore(cell);
var flyClone = cell.clone();
var i = $('.wrapper').children().size();
var lastChild = cell.parent().children()[i-1];
flyClone.insertAfter(lastChild);
var cellHeight = 48;
$('*').css("border-bottom","0");
flyClone.addClass('clone')
.attr('id','')
.animate({"height":cellHeight+"px"},{
duration: 500,
queue: false,
progress: function(animation, progress, remainingMs){
var h = Math.round(cellHeight * progress);
var l = Math.round(-progress * 50);
stayClone.css({"height":48-h +"px","z-index":"1","visibility":"hidden"});
flyClone.css({"height":h+"px","z-index":"1"});
cell.prev().css("border-bottom","1px solid #000");
stayClone.prev().css("border-bottom","1px solid #000");
cellOther.each(function(){
$(this).css({"top":$(this).data('top') + l + 'px'})
});
},
complete: function(){
stayClone.remove();
flyClone.remove();
$('*').css("border-bottom","0");
}
});
cell.insertAfter(lastChild).css({"z-index":"99","border-bottom":"1px solid #000"})
.animate({"top":"200px"},500,function(){
$(this).css({"z-index":"1","border-bottom":"1px solid #000"})
});
}
if(cell.next().size() == 0){
alert('我已经是最后一个了呢');
}else{
down();
}
});
});