Struggling with the communication between CSS and jQuery, I find myself torn. In CSS, my rules are often very specific, like this:
div#container > div#contentLeft {
//Code here
}
However, when I add jQuery to spice up my site, the CSS rules seem to load after the jQuery code runs. It would be ideal if the CSS loaded first so that the content appears neat and animated as intended.
One solution is to write less specific code, such as #contentLeft {}. This way, when I run my script, the CSS loads before the jQuery and everything works smoothly.
I prefer coding with high specificity, but can I achieve that while ensuring my jQuery animations run seamlessly?
Check out my JSfiddle here: http://jsfiddle.net/459epctg/
$(document).ready(function() {
$('#contentMenu').show('slide', {
direction: 'up'
}, 1000);
showContent();
});
function showContent() {
// jQuery code goes here
}* {
margin: 0;
padding: 0;
}
/* More CSS code follows */
</script>
<div id="wrapper">
<div id="navbar">
/* HTML content */
</div>
<div id="content">
/* More HTML content */
</div>
</div>