私が始めてから、私はこのトピックに関する他の質問を見てきました。別の質問を書いている理由は、サイトがjQueryアニメーションを使用してロードされるため、単に高さを自動的にアニメーション化した場合と同じように動作しないように見えるからです。jQuery - 自動で高さをアニメーション
私は個人的にはCSSの高さをautoに設定していると私とは何かと思っています。とにかく、私はウェブサイト(ロード時)を現時点で設定された高さではなく、高さautoにアニメーション化したいと思います。私はscrollHeightを取得し、それをその値にアニメーション化しようとしましたが、私が試した3-4の答えのアニメーションはありません。
$(".portfolio").animate({height:"590px"});
を、私の.portfolioのCSSは私がアニメーション化されるまで.portfolioの高さが0であることを対象と見ることができる
.portfolio {
width: 0px;
height: 0px;
max-height: 600px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
です:
現在、私は使用しています。 (.portfolioの中で).rowにはdisplayがnoneに設定されているためです。
基本的には、隠し要素のために目に見える内容がない(ページの自動読み込みを0にしている)にも、要素(.portfolio)の自動高さを取得する必要があります。
ディスプレイの代わりに不透明:これは固定しません。私はページの読み込み時に0になるように、ポートフォリオの高さが必要です。 http://conorreid.me/portfolio/ 私は本当にそれを願っています:あなたはでサイトを閲覧することができます JavaScript jQuery Animate to Auto Height
:私はそれを容易にするために何かを投稿することができた場合は
、私は質問に関連する答えを試みた
教えてくださいサイトリンクを投稿するのは大丈夫です。私はこの質問がなぜ必要なのか説明するのは難しいと感じました。
編集:
私は.portfolio要素を複製し、portfolio-2という名前に変更しました。これを絶対インデックスz-index:-100、不透明度0(autoの高さ)に設定しました。私は、この要素(私のモニター上の558)の高さを取得し、この高さに
var el = $('.portfolio-2'),
curHeight = el.height(),
autoHeight = el.css('height', 'auto').height();
$(".portfolio").height(curHeight).animate({height: autoHeight}, 1000);
を.portfolio設定しようとした。しかし、このありえないが働いて、なぜ今、私はちょうどわからないよ...私は実際に
を使用しています<script>alert($(".portfolio-2").css("height"))</script>
私はモニターの解像度で264を取得していますが、ページが完全にロードされた後、$( "portfolio-2")と入力した後、height()私はしなければならない..
あなたが「自動」にアニメーション化することはできませんしかし、あなたは '最大の高さを使用することができます:0;'して、 '最大の高さにアニメーション:。100000px;'。もちろんこれには 'overflow:hidden;'が必要です。 – connexo
@connexo要素の高さを取得し、その高さにアニメーションしてCSSをautoに変更できます。 http://stackoverflow.com/questions/5003220/javascript-jquery-animate-to-auto-height私の問題は、アニメーションのために1つではないので、 "auto"の高さをアニメーション化することができません。 – ConorReidd
Javascriptが不要なソリューションを提案していました。あなたはそれを試しましたか? – connexo