0

現在、3 層構造で div の位置をアニメーション化しようとしています。最初の層にはヘッダーのみが表示され、2 番目にはヘッダーと抜粋が表示され、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

カイル

4

1 に答える 1

0

この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;
}

Jクエリ

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

 });

ボトムを使用する代わりに、トップを使用できます。

$("#wrap").removeAttr("bottom").animate({
    top: 0
}, 2000);
于 2012-05-04T13:56:55.753 に答える