Question

问题：

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

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

});

Answer 1

您的语法错误$(".fade").css("display":"none");应为$(".fade").css("display", "none");或$(".fade").css({"display":"none"});

Answer 2

问题是他们相对于淡入的文本向下移动链接的位置，我修复了它JsFiddle

Answer 3

这是一种不言自明的方式:(小提琴 - 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();
    }

Answer 4

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

<强>的jsfiddle

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

如果您发现问题或错误，请告诉我，这可能有助于遇到类似问题的人。

Jquery fadeIn和CSS媒体查询

4 个答案: