Question

我需要一个CSS规则（或jQuery绑定？）来动画这种事件：

    $("#column").children().eq(-1).prependTo("#column")

我正在寻找的是一个＆＃34;幻灯片＆＃34;规则。

JSFiddle：http://jsfiddle.net/rkdLkjg8/3/

谢谢。

Answer 1

我想这就是你所期待的

http://codepen.io/moorthyrweb/pen/pvdppO

$("#button-action").on('click', moveBottomToTop);

var busy = false;

function moveBottomToTop() {
  if(busy) return;
  busy = true;
  //collect data
  var $column = $("#column"), 
      $lastChild = $column.find(":last-child"),
      lastChildPos = $lastChild.position();

  //prepare
  $lastChild.prependTo($column).css({
     position: "absolute",
     top: lastChildPos.top,
     zIndex: 99
  });

  //animate
  $lastChild.animate({
    top: 0
  }, function(){
    //settle
    $lastChild.css({
      position: "",
      zIndex: ""
    })
    busy = false;
  })

}

Answer 2

你可以借助两个可以触发过渡效果的类来实现这一点。 Javascript应该添加它们并在动画后删除。

＆＃13;

$("#button-action").on('click', function () {
    var $row = $("#column").children().eq(-1);
    $row.addClass('slide-start').prependTo("#column");
    setTimeout(function() {
        $row.addClass('slide-active');
        setTimeout(function() {
            $row.removeClass('slide-start slide-active');
        }, 500);
    }, 0);
})

＆＃13;

#column {
    width: 400px;
    height: 330px;
    background: #EEE;
    overflow: hidden;
}
.row {
    width: 400px;
    height: 100px;
    background-color: #44B846;
    margin-bottom: 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 100px;
}
.row.slide-start {
    margin-top: -110px;
    transition: margin-top .5s ease;
}
.row.slide-active {
    margin-top: inherit;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button-action">Move bottom to top</button>
<hr>
<div id="column">
    <div class="row">row 1</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
</div>

＆＃13;

Answer 3

尝试

$("#button-action")
.on('click', function () {
    $("#column div:eq(-1)")
    .slideUp(function () {
        $(this)
        .prependTo($(this).parent())
        .slideDown()
    })
});

jsfiddle http://jsfiddle.net/rkdLkjg8/4/

＆＃13;

$("#button-action")
    .on('click', function () {
        $("#column div:eq(-1)")
        .slideUp(function () {
            $(this)
            .prependTo($(this).parent())
            .slideDown()
        })
    });

＆＃13;

#column {
    width: 400px;
    height: 330px;
}
.row {
    width: 400px;
    height: 100px;
    background-color: #44B846;
    margin-bottom: 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button-action">Move bottom to top</button>
<hr>
<div id="column">
    <div class="row">row 1</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
</div>

＆＃13;

jQuery上的CSS动画prependTo在同一个div中

3 个答案: