0

問題：

ページの読み込み時にフェードインするナビゲーション バーがあります。次に、テキストのブロックが遅れてフェードインします。フェードインによってテキスト要素にインライン スタイルが発生するため、これにより、小さい画面解像度でテキストを非表示にするように設定されているメディア クエリが壊れます。

テキストのフェードを行うスクリプトを削除すると、私の言いたいことがわかるでしょう。jQuery がメディア クエリを壊さないように、この問題を回避するにはどうすればよいですか。では、メディアクエリで要素が表示されている場合にのみ、テキストをフェードインするにはどうすればよいでしょうか?

jsFiddle:

http://jsfiddle.net/visualdecree/RAWUG/

CSS

.banner-title{
    display: none;
}

.bar-top{
    height: auto;
    padding: 1.3em 0 1.3em 0;
    background: pink;
    margin: -135px 0 2.5em 0;
}

@media only screen and (min-width: 300px) {
    .banner-title{
        display: block;
        margin: 0;
        width: 100%;
        color: #333;
        font-style: italic;
        font-size: 1.1em;
        padding: 0 0 0 1%;
    }
}​

jQuery

$(function() {

    $(".bar-top").delay(700).animate({marginTop:'0px'}, 750, 'swing');

    $(".banner-title").delay(1500).addClass("fade");
        $(".fade").fadeIn("slow")
        $(".fade").css("display":"none");
        $(".fade").hide();

});
4

4 に答える 4

0

問題は、フェードインするテキストに対して下に移動するリンクの位置でした。JsFiddleを修正しました。

于 2012-09-08T00:21:09.703 に答える
0

これは、一目瞭然の方法です：（フィドル - http://jsfiddle.net/joplomacedo/RAWUG/3/）

    $(".bar-top").delay(700).animate({
        marginTop: '0px'
    }, 750, 'swing');


    if ( $(".banner-title").css('display') == 'block' ) {
        $(".banner-title").delay(1500).addClass("fade");
        $(".fade").fadeIn("slow");
        $(".fade").hide();
    }
于 2012-09-08T00:31:29.857 に答える
0

さて、私のソリューションは問題ないようです。改善した人は、これに自由に追加してください。fadeIn基本的に画面の幅を確認し、ページの読み込み時に実行される によって設定されたインライン スタイルを上書きする 2 番目の関数を実行することで修正されることがわかりました。

jsフィドル

http://jsfiddle.net/visualdecree/RAWUG/4/

問題やエラーが発生した場合はお知らせください。これは、同様の問題を抱えている人の助けになるかもしれません。

于 2012-09-10T00:24:18.370 に答える
0

またはの構文エラー$(".fade").css("display":"none");があります。$(".fade").css("display", "none");$(".fade").css({"display":"none"});

于 2012-09-08T00:03:21.033 に答える