javascript - 如何使用位置底部将 div 设置为页面顶部的动画

Question

我目前正在尝试在 3 层结构中为 div 的位置设置动画，第一层仅显示标题，第二层显示标题和摘录，然后第三层显示一些额外的副本。目前，我可以为第 1 层和第 2 层设置底部位置动画，但似乎无法弄清楚如何将第 3 层设置为理想情况下的顶部：0，我认为我无法做到。任何人都可以就如何实现这一目标提供任何建议吗？

JS

more.on('click', function(e){

  if( body.hasClass('tier1') ){
    body.removeClass('tier1').addClass('tier2');
    wrapper.delay(500).animate({ bottom: wrapper.data('tier2') }, 400, function(){
      //show close
      close.show();
    });

  } else if ( body.hasClass('tier2') ){
    body.removeClass('tier2').addClass('tier3');
    wrapper.delay(1500).animate({ bottom: '300' }, 500, function(){ // show be top of window
      // hide read more
      more.hide();

      // hide .excerpt + show .upper
      excerpt.fadeOut(function(){
        upper.fadeIn();
      });
    });
  }

  e.preventDefault();
});

链接到当前版本：http ://bit.ly/IA65Mb

凯尔

Answer 1

检查这个http://jsfiddle.net/d3eLE/6/ HTML

<div id="wrap">
        <a id="me">Click me</a>
</div>

CSS

#wrap {
    position: absolute;
    bottom: 0;
    width: 400px;
    height: 50px;
    background: #ff0;
}

#me {
    border: 1px #000 solid;
    background: #0f0;
}

jQuery

$("#me").click(function(){
    $("#wrap").animate({
        bottom: ( $(window).height() - $("#wrap").height() )
    }, 2000);

 });

除了使用底部，您可以使用顶部。

$("#wrap").removeAttr("bottom").animate({
    top: 0
}, 2000);