jQuery properties before page loads?
I've got a few DIVs that I'm applying some basic jQuery animation to, such as animating and opacity开发者_Go百科 change on mouseovers, etc. (ex: When you rollover an image, a transparent .png rollover fades in as well as a text box that slides up from the bottom, and both return to previous stage when mouseout)
Now I have the overlay image property set to hidden THROUGH jQuery, just incase JavaScript is enabled so that it doesn't interfere with the functionality.
$('.nametag').css({
bottom: '-25px',
opacity: 0.7
});
However, when you load up the page, you see the text box (.nametag) appear then flickr away.
How do I hide the flicker effect, loading the jQuery CSS before the page even loads?
By default do the display required for javascript in your CSS but add some CSS with wrapped in <noscript> tags so it displays properly if javascript is disabled.
<style type="text/css">
.nametag {
bottom: -25px,
opacity: 0.7
}
</style>
<noscript>
<style type="text/css">
.nametag {
bottom: 0,
opacity: 1
}
</style>
</noscript>
EDIT: Changed css to reflect that in the question.
This typically comes down to your CSS and how it's loading, prior to things being turned off, hidden, etc...
The easiest solution I've used, versus hiding, etc.. is to set your position off-screen, so like:
.nametag {
position: relative;
left: -5000px;
}
And then bring it back when you're animating, or something like that, to eliminate the flickering
The easiest way is to do this....
CSS
.javascript .nametag {
bottom: -25px;
opacity: 0.7;
}
jQuery
Place this in a script element, in your head element.
$(function() {
$('body').addClass('javascript');
});
For even faster adding of the class, you could place this directly after your <body> tag (and it doesn't rely on jQuery being loaded).
<script type="text/javascript">
document.body.className += ' javascript';
</script>
加载中,请稍侯......
精彩评论