Question

我目前正试图在3层结构中设置div的位置动画，第一层仅显示标题，第二层显示标题和摘录，然后是第3层另外的副本。目前我可以为第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);

 });

您可以使用top。而不是使用bottom。

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

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

1 个答案: