【小效果们】JQuery酷炫的换行_jquery bindtip怎么换行-CSDN博客

本文链接：https://blog.csdn.net/mercury8862/article/details/24393999

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

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

});

});