JQuery fade problems

Hello,

I'm trying to get a simple page to "fade in" using the JQuery library.

Here how things are set up:

1. In the HTML page, I have the following JS declarations:

<blockquote>code:

</blockquote>

The scripts folder is in on the root of the server (Tomcat) created where the html files are located (ROOT). The functions.js is in the same directory with the HTML files.

2. The functions.js file has the following content:

<blockquote>code:

<pre name="code" class="core">

$(document).ready(function() {
$('#homepage').show('850');
});

</pre>

</blockquote>

3. I created a div like this in the html around the table which has the page's content to fade:

<blockquote>code:

<pre name="code" class="core">

<div id="homepage">
<table width="100%" border="1" cellpadding="1" cellspacing="3"
bordercolor="#000099" bgcolor="#FFFFFF">

.
. all content to fade in table
.

</div>

</pre>

</blockquote>

However, when I refresh the page, the fade in does not occur.

I'm probably missing something basic.

I've modified the paths to the jquery library, but that didn't do it. The HTML also had some onLoad logic to other JS code which I removed, but that didn't help either.

Thanks to all in advance for suggestions.

Mike

Firstly, make sure that your paths are correct. Do they work when you type them into the browser address bar?

Secondly, you need to hide the content so that it can fade in. If it's already displayed, the effects have nothing to do.

Here's a test page that I set up:

<blockquote>code:

<pre name="code" class="core"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fade test</title>
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
$('#content').fadeIn(850);
});
</script>
<style type="text/css">
#content { display: none; }
</style>
</head>

<body>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum nec
eros. Duis erat sem, fringilla quis, malesuada ut, condimentum rutrum, metus.
Pellentesque aliquam. Donec cursus justo ac ligula. Cras nunc tellus, pharetra a,
ullamcorper faucibus, mollis quis, tellus. Sed nibh. Aenean venenatis erat id elit.
Donec molestie elit nec ipsum euismod accumsan. Aenean porttitor neque vel nisl.
Aliquam tempus libero et purus. Integer in turpis. Curabitur et nisl a libero
ullamcorper hendrerit. Ut est nulla, posuere vitae, facilisis sed, aliquam dictum,
est. Sed vitae ligula pellentesque erat tristique pharetra. Duis consequat viverra
dui. Nullam libero massa, vulputate euismod, semper eu, pulvinar vel, pede.
Nulla fermentum tincidunt dui. Mauris non magna.
</div>
</body>
</html>
</pre>

</blockquote>

Note: for a fade effect you wouldn't use show(). That will create a :scale in" effect. Use fadeIn() as I show in this example.

Thanks Bear. It works great now.

I'm sure you point out these kind of pitfalls in your book (which I did order today!).

The only thing I notice now is that if I use a bigger number than 850 for the fadeIn parameter (like 2000), the fadeIn speed still seems the same.

Thanks again for your help!!!

Mike

Make sure that your 850 isn't cached. I notice a distinct difference.