2

一定の遅延の後、メインのロゴ画像を（Jqueryを使用して）フェードインさせようとしています。

スクリプトは実際には正常に機能しますが、最初にページをロードしたときに、ページ全体が次のようになります。style="display:none"

display:noneページ全体ではなく、ロゴだけが必要です。足りないものはありますか？閉じていないタグはありますか？ここにリンクがあります：私のウェブサイト そしてここにコード[Javascript]があります：

`<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
        $('#logo').delay(1500).fadeIn(1500);
});
</script>

そしてここにHTMLがあります：

<img src="img/made_clothes2.png" class="clothingLogo" id="logo" style="display:none;" />
<center><ul class="social">
    <li><a href="http://www.facebook.com/madeclothiers"><img src="img/facebook.png" class="social"></a></li>
    <li><a href="http://www.twitter.com/madeclothiers"><img src="img/twitter.png" class="social"></a></li>
    <li><a href="http://www.madeclothiers.tumblr.com/"><img src="img/tumblr.png" class="social"></a></li>
    <li><a href="http://web.stagram.com/n/madeclothiers"><img src="img/instagram.png" class="social"></a></li>
</ul></center>

現在のところ、ページの読み込み時に、delay.fadeIn（）が実行されるまで何も表示されません...他の「ソーシャル」画像を読み込み、＃logoを[delay.fadeIn（ ）]。

ありがとう、[編集：imgタグとulタグを修正しましたが、画像の「ソーシャル」画像の読み込みに進みません]

4

4 に答える 4

3

</img>タグはありません。それを作る<img src="img/made_clothes2.png" class="clothingLogo" id="logo" style="display:none;" />。

ブラウザはおそらくそれを窒息させるので、他には何も表示されません。

私はあなたの問題を見つけました。スタイルシートで次のように設定します。

ul.social{
  list-style-type: none;
  margin-top: -12%;   // <- problem is here
  text-aling: center;
}

#form非表示の場合はul.social、ページの上部にあります。可視領域より12％上にありmargin-top: -12%ます.......。

PS：ビールとケーキを私の家に送って、HTMLを検証してください！

于 2012-09-27T21:41:51.860 に答える
3

更新された回答、実際に機能するものは、jqueryスクリプトを次のように変更します

$(document).ready(function() {
        $('#logo').css({ opacity: 1});
});

これをCSSに追加します

.clothingLogo {
    opacity: 0.001;
    transition: opacity 1.5s 1.5s;
    -moz-transition: opacity 1.5s 1.5s;
    -webkit-transition: opacity 1.5s 1.5s;
    -o-transition: opacity 1.5s 1.5s;
    -ms-transition: opacity 1.5s 1.5s;
    -khtml-transition: opacity 1.5s 1.5s;
}

画像からすべてのスタイリングを削除します

<img src="img/made_clothes2.png" class="clothingLogo" id="logo" />

FirefoxとChromeをテストしました。必要に応じて、アンティーク、つまりバージョンの不透明度を表現する他の方法を見つけることができます。

于 2012-09-27T22:17:08.103 に答える
1

考えただけですが、cssでそのロゴ画像の幅と高さを設定し、そのスタイルのopacity: 0.001代わりに使用してみることをお勧めしdisplay: noneます。ブラウザがimgタグにヒットした瞬間に画像がダウンロード要求を受け取るため、より適切に機能する場合があります。 、jqueryが不透明度の切り替えを開始したときではありません

<img src="img/made_clothes2.png" class="clothingLogo" id="logo" style="opacity: 0.001; width: 1024px; height: 768px;" />
于 2012-09-27T21:46:25.467 に答える
1

実際imgのタグは次のようになります

<img src="img/made_clothes2.png" class="clothingLogo" id="logo" style="display:none;" />

代わりに次のJavaScriptを使用できます

<script type="text/javascript">
    $(document).ready(function() {
        setTimeout(function(){
            $('#logo').fadeIn(1500);
        }, 1500);
    });
</script>

また、<ul>タグには、のような終了タグがあり、非推奨のを使用する代わりに、を中央に配置するために</ul>使用する必要があります。css/styleul<center>

于 2012-09-27T21:47:26.367 に答える