web-dev-qa-db-ja.com

jQueryはCSSの「上」から「下」にアニメーション化します

ページの読み込みで、div要素を絶対的な最上部の位置から絶対的な最下部の位置までアニメーション化しようとしています。

以下のCSSとjQueryコードの組み合わせでは、何も移動できません。

CSS

#line-three {
    position:absolute;
    width:100%;
    left:0px;
    top:113px;
}

jQuery

 $("#line-three").animate({
    bottom: "100px",
    }, 1200);

ご協力ありがとうございました！

編集：

（graphicdevineの提案に従って）これに変更しようとしましたが、まだ葉巻はありません：

var footerOffsetTop = $('#line-three').offset().bottom;
  $('#line-three').css({position:'absolute',top:'',bottom:footerOffsetTop})
  $("#line-three").delay(100).animate({
    bottom: '100px',
    }, 1200);
jquerycssanimationjquery-animate
13
bravokiloecho

私は最終的に解決策を思いついた...

基本的に、古いtopの位置から、topの高さを取得し、（1）windowから目的の位置を差し引いて計算するbottomを基準にして別の位置にアニメーション化します。（2）アニメーション化する要素の高さ。次に、アニメーションの最後に、CSSを変更するためのコールバックを追加して、要素が下限値と上限auto値で配置されるようにします

JQueryスクリプトは次のとおりです。

$('#click').click(function () {

    var windowHeight = $(window).height();
    var lineHeight = $('#line').height();
    var desiredBottom = 100;

    var newPosition = windowHeight - (lineHeight + desiredBottom);

    $('#line').animate({top:newPosition},1000,function () {
        $('#line').css({
            bottom: desiredBottom,
            top: 'auto'
        });
    });

});

このjsFiddleで機能していることがわかります

12
bravokiloecho

.cssメソッドを使用してtop：autoを設定し、アニメーション化できます。

$(document).ready(function(){
   $("#line-three").css({top:'auto'});   
   $("#line-three").animate({bottom:'100px'}, 200)   
})

編集：

本体/画面のサイズでプレイし、上部の位置を下部の位置に変換してから、目的の下部の位置にアニメーション化できます。

$(document).ready(function(){
  var bodyHeight = $('body').height();
  var footerOffsetTop = $('#line-three').offset().top;
  var topToBottom = bodyHeight -footerOffsetTop;

  $('#line-three').css({top:'auto',bottom:topToBottom});
  $("#line-three").delay(100).animate({
    bottom: '100px',
  }, 1200);

}）

例： http://jsfiddle.net/reWwx/4/

5
davidmatas

多分これは役立つでしょうか？

$(document).ready( function() {
    var div = jQuery("#dvVertigo");

    div.animate({
           left: '0',    
                top: '+=' + ($(window).height()-20)               
            }, 5000, function () {
                // Animation complete.
            });
});

完全なコード：

http://jsfiddle.net/yyankowski/jMjdR/

2
Yan Yankowski

現在のボトム値は、css（ 'bottom'）で設定できます。これは私のために機能します（jQuery1.7.2）：

$('#line-three').css({bottom:$('#line-three').css('bottom'), top:'auto'});
$('#line-three').animate({ bottom: position }, 250);
0
T. Christiansen

編集：すぐに去らなければならなかったので終了しませんでした、私はjquery uiを例に使用することにしました（コアが必要です）：

<html><head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<style>
#line_three { width:100%; }
.line3_top {
    position:absolute;
    top:113px;
    left:0px;
}
.line3_btm {
    position:absolute;
    bottom:100px;
    left:0px;
}
</style>
<script type="text/javascript">
    var topbtm = true;
    $(document).ready(function(){
        $("#line_three").mouseenter(function(){
            if ( topbtm ) {
                $("#line_three").switchClass("line3_top","line3_btm",400);
            } else {
                $("#line_three").switchClass("line3_btm","line3_top",400);
            }
            topbtm = !topbtm;
        });
    });
</script>
</head><body>
<div id="line_three" class="line3_top">
    hello;
</div>
</body></html>

http://jsfiddle.net/syVzK/1/ （オーバーアニメーションを防ぐためにトグルスイッチを変更）

他の提案も好きです。

EDIT2：IEでテストしただけです...奇妙に動作します。 IEでJquery UIスイッチクラスを使用した場合の動作がおかしいので、ストレートに行う必要があるかもしれません。

EDIT3：

OK、IEとFF ...で動作しました...ただし、いくつかの注意事項があります。+ 20はジャンプしないようにするためです。innerHeightの0のテストは、高さが設定されていない場合のテストです。要素（または本文）の場合、配置されているdiv内にある場合は、高さを設定します。

また、これはjsfiddleでは機能しませんでしたが、通常のWebページでは機能しました。 jsfiddleは避けてください。

    <script type="text/javascript">
var topbtm = 1,top3=113,btm3=100;
$(document).ready(function(){
    $("#line_three").mouseenter(function(){
        var ih = $(this).offsetParent().innerHeight();
        if (ih==0){ih=$(document).innerHeight();}
        if ( topbtm==1 ) {
            topbtm=-1;
            $("#line_three")
                .animate({"top":(ih-(btm3+20))}
                         ,500
                         ,function(){
                             $(this).css({"top":"auto","bottom":btm3});
                })
            topbtm=0;
        } else if ( topbtm==0 ) {
            topbtm=-1;
            $("#line_three")
                .animate({"bottom":(ih-(top3+20))}
                         ,500
                         ,function(){
                             $(this).css({"bottom":"auto","top":top3});
                })
            topbtm=1;
        }
    });
});
    </script>
0
craniumonempty

$("#line-three").css({position:'absolute',top:'auto',bottom:'100px'})

それでうまくいくはずです。おそらく 'top'値をautoにリセットする必要があります

[〜＃〜]編集[〜＃〜]

アニメートするには、.animate（）;を使用する必要があります。

これを試して：

$("#line-three").animate({position:'absolute',top:'auto',bottom:'100px'}, 400)

0
peduarte

おそらく：

 $("#line-three").animate({position:'absolute',top:'auto',bottom:'100px'},1200)

編集

はい、これは最初に表示されるよりも注意が必要です。コンテナーに対する現在の位置を（offsetを使用して）分析し、そこから作業する必要がある場合があります。

0
graphicdivine

アニメートしたい場合は、次のようにします。

$("#line-three").animate({
    top: "500px",
    }, 1200);

ここでフィドル： http://jsfiddle.net/nicolapeluchetti/xhHrh/

0
Nicola Peluchetti

これを使用してアニメーション化できます： このJSFiddleをチェックアウト：

$('#button').click(function(e){ // On click of something
    e.preventDefault(); // Prevent the default click aciton
    $("#line-three").animate({
        top: "300px",
    }, 1200);
});
0
Anil