Issue at Hand:
An issue arises with my navigation bar and text block animations. The fading effect applied on the text element causes inline styles to be added, thus disrupting the media query set to hide the text on smaller screens.
If you disable the script responsible for the fading effect, you will notice the problem. How can I work around this predicament so that the jQuery animation does not interfere with my media query? In other words, how do I ensure the text only fades in when the media query dictates the element should be visible?
Access jsFiddle example here:
http://jsfiddle.net/visualdecree/RAWUG/
CSS Styling:
.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 Script:
$(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();
});