jQuery的淡入和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(); 

});

來源

2012-09-07 Doidgey

那麼它會出現在我的解決方案是拿着確定。任何有改進的人都可以隨時補充。我發現該修復程序正在運行第二個函數，該函數基本上查看了屏幕寬度，並覆蓋了頁面加載時運行的fadeIn設置的任何內聯樣式。

的jsfiddle

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

如果你看到一個問題或錯誤，請讓我知道，這可能幫助別人有類似的問題。

來源

2012-09-10 00:24:18 Doidgey

你有一個語法錯誤$(".fade").css("display":"none");應$(".fade").css("display", "none");或$(".fade").css({"display":"none"});

來源

2012-09-08 00:03:21 Musa

的問題鏈接的定位，他們得到相對變淡文本向下移動，我固定它JsFiddle

來源

2012-09-08 00:21:09

這裏有一個，不言自明，辦法做到這一點：（小提琴 - 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-08 00:31:29 banzomaikaka

看着小提琴我可以看到它增加了類，但我看不到任何不同的事情發生？它不隱藏元素 – Doidgey

是的。好吧，如果您的屏幕已經低於您在媒體查詢中設置的突破點（通常會發生什麼），那麼這起作用。如果動畫發生，那麼它不起作用，然後縮小窗口的寬度。我會用這種方式發佈解決方案。 – banzomaikaka

謝謝，我一直在努力工作了很多年。我期待看到解決方案！ – Doidgey

jQuery的淡入和CSS媒體查詢

回答

相關問題