PDA

View Full Version : Resolved Fading effect with JS



MaTaX
04-28-2009, 08:44 PM
I know it's possible, but after searching and searching I can't find what I'm looking for.

I want my banner image at the top of the page to fade in when teh page loads, I know it has something to do with opacity and what not but I don't know what to type to get it to do that, can someone please help me.

Snookerman
04-28-2009, 09:08 PM
You could use jQuery (http://jquery.com/), like this for instance:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascrpt">
$('div.banner').css({'opacity':0.5});
$(function(){$('div.banner').animate({'opacity':1},1000);});
</script>
All you need to do is give your div a class of banner.

Good luck!

magicyte
04-29-2009, 02:59 AM
jQuery would be your best bet, though you could do it with regular JavaScript. However, because of stupid Internet Explorer, divs won't fade like they should, so you need to use some extra JavaScript to make it work in multiple browsers. Again, jQuery, a JavaScript framework, would be your best bet. And this is if you wanna do it from scratch: fading effects with javascript (http://www.lmgtfy.com/?q=fading+effects+with+javascript)

MaTaX
04-30-2009, 03:25 AM
thanks much guys!:)

Snookerman
04-30-2009, 07:01 AM
You're welcome MaTaX, glad to help you.

Happy coding!