Jquery fadeIn和CSS媒体查询

问题：

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

如果你删除了文字淡入淡出的脚本，你就会明白我的意思。我怎样才能绕过这个问题，使jQuery不会破坏我的媒体查询。那么，只有当媒体查询中的元素可见时，如何才能使文本淡入

jsFiddle:

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();

});

---

出现语法错误

$（.fade”）.css（“显示”：“无”）应该是
$（.fade”）.css（“显示”、“无”）
或
$（“.fade”）.css（{“display”：“none”}）
问题在于它们相对于淡入文本向下移动的链接的位置，我修复了它。
这里有一种不言自明的方法：（fiddle-）

看来我的解决方案还可以。任何有进步的人，请随时补充。我发现修复程序正在运行第二个函数，该函数主要查看屏幕宽度，并覆盖在页面加载时运行的
fadeIn
设置的任何内联样式

jsFiddle


如果您看到问题或错误，请让我知道，这可能会帮助有类似问题的人
 看着小提琴，我可以看到它增加了类好，但我看不到任何不同的发生？它没有隐藏元素是的。好的，如果您开始时屏幕已经低于您在媒体查询中设置的断点（通常会发生什么情况），那么这是可行的。如果发生动画，然后缩小窗口的宽度，则此操作不起作用。我将发布一个解决方案，它也是这样工作的。谢谢，我已经尝试了很久了。我期待着看到解决方案！我不确定这是一个特别优雅的解决方案，但我有这个，它似乎在起作用：
    $(".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();
    }