Tutorial: Page Fade In

by **zztechjoezz** » Tue Jul 27, 2010 10:14 pm

I just thought that I would share with you how to make a page fade in using jQuery. It is used on many websites, but one big example is Google. It doesn't just have to be used for a page, it can be used for specific tags in a document.

So here it is:

Line number On/Off | Expand/Contract | Select all

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){   
    $('#container').fadeIn(3000);
});
</script>
</head>
 
<body>
<div id="container" style="display:none; text-align:center;">
Content will fade in Here
<img src="http://www.phpacademy.org/forum/phpacademylogo-225x35.gif">
</div>
</body
</html>

BTW I know that the document isn't set out properly, but I just wanted to focus on the jQuery

Please give Karma if I've helped

**Advertisment**

http://www.youtube.com/user/phpacademy · by **alex** » Tue Jul 27, 2010 10:17 pm

Thanks for this.

Moved to Share > PHP Code

by **zztechjoezz** » Tue Jul 27, 2010 10:19 pm

Oops. Sorry Alex, I thought that this section was for PHP code only. Thanks for moving it.

by **wide_load** » Tue Jul 27, 2010 10:23 pm

jQuery = cheating.

this is really just one function call...

I wrote my own fade function instead of relying on jquery

Line number On/Off | Expand/Contract | Select all

// used by fade.
function perform_fade(e, from, to, total_time, last_time, time_remain){
    var current_time = new Date().getTime();
    
    var new_opacity = ((time_remain / total_time) * (from - to)) + to;
    if (new_opacity < 0){ new_opacity *= -1; }
    
    e.style.opacity = new_opacity;
    e.style.filter = 'alpha(opacity=' + Math.round(new_opacity * 100) + ')';
        
    if (time_remain > 0){
        e.fading = true;
        window.setTimeout(function(){ perform_fade(e, from, to, total_time, current_time, time_remain - (current_time - last_time)); }, 25);
    }else{
        e.fading = false;
    }
}
 
// fade an element.
function fade(e, from, to, time){   
    if (e.fading !== true){
        e.style.opacity = from;
        e.style.filter = 'alpha(opacity=' + from * 100 + ')';
        window.setTimeout(function(){ perform_fade(e, from, to, time, new Date().getTime(), time); }, 25);
    }
}

I don't mean to offend, but is there really any point sharing something that is just one function call.

by **zztechjoezz** » Tue Jul 27, 2010 10:27 pm

wide_load wrote:jQuery = cheating.

this is really just one function call...

I wrote my own fade function instead of relying on jquery

Line number On/Off | Expand/Contract | Select all
// used by fade.
function perform_fade(e, from, to, total_time, last_time, time_remain){
var current_time = new Date().getTime();

var new_opacity = ((time_remain / total_time) * (from - to)) + to;
if (new_opacity < 0){ new_opacity *= -1; }

e.style.opacity = new_opacity;
e.style.filter = 'alpha(opacity=' + Math.round(new_opacity * 100) + ')';

if (time_remain > 0){
e.fading = true;
window.setTimeout(function(){ perform_fade(e, from, to, total_time, current_time, time_remain - (current_time - last_time)); }, 25);
}else{
e.fading = false;
}
}

// fade an element.
function fade(e, from, to, time){
if (e.fading !== true){
e.style.opacity = from;
e.style.filter = 'alpha(opacity=' + from * 100 + ')';
window.setTimeout(function(){ perform_fade(e, from, to, time, new Date().getTime(), time); }, 25);
}
}

I don't mean to offend, but is there really any point sharing something that is just one function call.

I just thought that I would share it, because I haven't seen anyone post anything like this yet. There are other more complex ways around it(such as your javascript method), but I find that is easier to use jQuery. I can see your point, but it is really just so people know how to do it.

by **wide_load** » Tue Jul 27, 2010 10:31 pm

zztechjoezz wrote:I just thought that I would share it, because I haven't seen anyone post anything like this yet. There are other more complex ways around it(such as your javascript method), but I find that is easier to use jQuery. I can see your point, but it is really just so people know how to do it.

that's the definition of what I think is wrong with jQuery. People use it because its easy, despite being less efficient. It also prevent them learning real javascript, which eventually limits what you can do.

by **zztechjoezz** » Tue Jul 27, 2010 10:34 pm

wide_load wrote:that's the definition of what I think is wrong with jQuery. People use it because its easy, despite being less efficient. It also prevent them learning real javascript, which eventually limits what you can do.

I can see where your coming from. I am still trying to learn javascript, but at the moment I am finding jQuery easier to use. I am not going to leech off jQuery for everything. I am actually trying to learn Javascript.

by **CometJack** » Fri Jul 30, 2010 12:49 am

Sorry but this isn't working for me

by **zztechjoezz** » Fri Jul 30, 2010 3:04 pm

CometJack wrote:Sorry but this isn't working for me

Line number On/Off | Expand/Contract | Select all

$('#container').fadeIn(3000);

Change where it says container to the id of what you want to fade in.

example

Line number On/Off | Expand/Contract | Select all

 
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){   
     $('#mydivid').fadeIn(3000);
 });
</script>
</head>
 
<body>
<div id="mydivid" style="display:none; text-align:center;">
The content in this div will fade, because it has the id of "mydivid."
</div>
<div id="otherdiv">
Content in this div will not fade, because it doesn't have the div tag "mydivid."
</div>
</body>
</html>
 

by **Tino** » Fri Jul 30, 2010 10:52 pm

And, of course, include jQuery :roll:

I don't consider using frameworks/libraries 'cheating'. Frameworks allow you to perform certain tasks with less work than others, making web development more efficient. That's not to see the core languages shouldn't be learnt, especially not since they are generally required to fully understand the framework. Knowing at least the fundamentals of a language is pretty much required in order to fully understand a framework.

Personally, I'm very fond of the jQuery library, mostly because it makes working with AJAX so incredibly easy. Yes, you can call it cheating, but I'd prefer to call the improvement of libraries like jQuery and MooTools a step forward, not a step backward.

phpacademy Forum

Tutorial: Page Fade In

Tutorial: Page Fade In

Re: Tutorial: Page Fade In

Re: Tutorial: Page Fade In

Re: Tutorial: Page Fade In

Re: Tutorial: Page Fade In

Re: Tutorial: Page Fade In

Re: Tutorial: Page Fade In

Re: Tutorial: Page Fade In

Re: Tutorial: Page Fade In

Re: Tutorial: Page Fade In

Re: Tutorial: Page Fade In

Who's online?