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

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

于 2012-09-08T00:03:21.033 回答
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在页面加载时运行的任何内联样式设置。

jsFiddle

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

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

于 2012-09-10T00:24:18.370 回答