I am not very experienced with javascript but I asume this is not a difficult problem. Never the less I am lost and am wondering how to make multiple div's fade in with a delay when a page loads, say 5-10 divs using Jquery. The following is the code I am using and need but modified so I can load 5+ div's:
<script>
$(".fade").hide(0).delay(1000).fadeIn(1000)
</script>
I am not very experienced with javascript but I asume this is not a difficult problem. Never the less I am lost and am wondering how to make multiple div's fade in with a delay when a page loads, say 5-10 divs using Jquery. The following is the code I am using and need but modified so I can load 5+ div's:
<script>
$(".fade").hide(0).delay(1000).fadeIn(1000)
</script>
- This code works for me: jsfiddle/Gcq36. What's wrong with it? – Blender Commented Aug 7, 2012 at 0:36
3 Answers
Reset to default 3$(".fade, #anotherElement, #yetAnother, .etc").hide(0).delay(1000).fadeIn(1000)
It's called multiple selectors.
That code should work fine if the ".fade" elements have already been parsed when it runs - which won't be the case if you have placed that script block in the <head>. If the script block is at the bottom of the body it will work, or if you put the code in a document ready handler so that it will run after the document has been parsed:
$(document).ready(function() {
$(".fade").hide(0).delay(1000).fadeIn(1000);
});
Demo: http://jsfiddle/nnnnnn/QHwge/
You don't have to do this with javascript, but the examples here all seem to work fine.
Here is an example using CSS:
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745282816a4620379.html
评论列表（0条）