2016-04-30 17 views
2

私が始めてから、私はこのトピックに関する他の質問を見てきました。別の質問を書いている理由は、サイトが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

あなたが「自動」にアニメーション化することはできませんしかし、あなたは '最大の高さを使用することができます:0;'して、 '最大の高さにアニメーション:。100000px;'。もちろんこれには 'overflow:hidden;'が必要です。 – connexo

+0

@connexo要素の高さを取得し、その高さにアニメーションしてCSSをautoに変更できます。 http://stackoverflow.com/questions/5003220/javascript-jquery-animate-to-auto-height私の問題は、アニメーションのために1つではないので、 "auto"の高さをアニメーション化することができません。 – ConorReidd

+0

Javascriptが不要なソリューションを提案していました。あなたはそれを試しましたか? – connexo

答えて

0

ここで修正を見つけようとした後:

  • .portfolioとその中のすべてを複製しました。不透明度を0に、z-インデックスを-1000に設定しました。そのため、jQueryのホバー効果をトリガーするような、ホバーブル/選択可能な要素はありません。最後に私がページをロードしたときの画像がレンダリングされていなかったとして、(恐ろしい高さの間違いを取得私には40%の虚偽の答弁を与える〜正しい値修正する

私はに

$(document).ready(

を変更

$(window).load(

は今それが応答だ= D

関連する問題