Jquery fadeIn 和 CSS 媒体查询

Question

问题:

我有一个在页面加载时淡入的导航栏。然后一段文本会延迟淡入。由于在文本元素上导致内联样式的淡入淡出，这会破坏设置为以较小的屏幕分辨率隐藏文本的媒体查询。

如果您删除为文本执行淡入淡出的脚本，您就会明白我的意思。我怎样才能解决这个问题，以便 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();

});

Answer 1

你有语法错误 $(".fade").css("display":"none"); 应该是 $(".fade").css("display", "none"); 或 $(".fade").css({"display":"none"});