You could use a `.no-js` class on your `` to target users that have JS disabled and then make sure it’s visible for them.
You simply remove the class with JS and then users that have JS enabled will have it hidden for them. This type of practice is pretty common this days, especially when using Modernizr (I believe it has this functionality built in).
coincidentally i was just thinking about this exact same thing a few days ago. I personally think it’s best to do anything with CSS as apposed to Jquery. I found out that CSS animations and transitions run a little smoother than Jquery’s .animate(). And CSS also has shorter code to do the same thing jQuery does. Not that it will mean much of a difference but the browser reads shorter code faster. So go with CSS whenever possible, and if not go with jQuery.
I believe the answer to your original question is that there’s not really a problem with hiding elements with CSS before you do a jQuery action on them. But keep in mind that sometimes, when an element has property display:none, jQuery won’t always recognize it.
If you would hide them with jQuery, then you run the risk that the page loads (with the elements visible), then as soon as the jQuery kicks in they will be hidden, and then you will make them visible again with an animation. Hardly efficient, in my view.