I tried everything, but i can't get this fade work. This is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>ItsMyWebsite</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
function fader() 
{
 $("#logofade").html('<img src="images/logo.gif" alt="Logo" />');
 $("#logofade").fadeOut("slow", function(){
  // window location change occurs after the fadeout
  window.location = "index2.html";
 });
}
</script>    
</head>
    <body>
    <p><input name="logofader" type="button" value="FadeIt" onclick="fader()" /></p>
    <p><span id="logofade"></span></p>
    </body>
    </html>

3 answers

Mottie 1134
1
point
This was chosen as the best answer

First off, when you add any code inside a <script> tag with a src file to load. The code will only be called if the src file doesn't exist. This is the same idea as when a browser doesn't support frames.

<script type="text/javascript" src="/this-file-exists.js">
// Anything inside of here will not run because the src file exists
</script>

Secondly, you are using quotes inside of quotes in the innerHTML definition... This is how it should look (slightly modified to use jQuery instead of javascript):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
function fader() 
{
 $("#logofade").html('<img src="../images/logo.gif" alt="Logo" />');
 $("#logofade").fadeOut("slow", function(){
  // window location change occurs after the fadeout
  window.location = "index2.html";
 });
}
</script>

Lastly, if you change the window.location immediately after the fadeout, you won't see the animation because is it done asynchronously from the location change (add it as a callback to the fadeout if you want to see this fade animation as I did in the example above)

Oops, one more thing. The path to your image needs two periods to move up one directory. I corrected it in the example code above.


Update: Added the jquery script ABOVE the fader code

Answered almost 7 years ago by Mottie
  • It still does nothing when i click on the button... i putted it online: http://testfade.gdscei.com, maybe you can figure it out... TutorialPoint almost 7 years ago
  • Yeah, what danwellman said, you're not loading jQuery on your test page. I tested it after adding it and it works fine. Mottie almost 7 years ago
  • It works! Thank you so much! Do you know how to get it slower? for a 'slow' function it is going quite fast. TutorialPoint almost 7 years ago
  • nevermind, got that. TutorialPoint almost 7 years ago
danwellman 5600
0
points

.fadeOut() is a jQuery method not a regular JavaScript function so you need to be linking to the jQuery source file above your current <script> element:

<script type="text/javascript" src="path_to_jquery.js">

Additonally, the language attribute on <script> elements is deprecated and shouldn't be used.

Answered almost 7 years ago by danwellman
  • That does not make it work. When i click on the button in IE, it says 'Error on page'; and when i click on that, it says 'object expected on line 18'; the line were the button is. What do i have to do? TutorialPoint almost 7 years ago
  • btw: W3C validation says 'document type does not allow element "img" here'... TutorialPoint almost 7 years ago
  • how can i define it then? TutorialPoint almost 7 years ago
danwellman 5600
0
points

The test page isn't linking to jQuery directly before the existing <script> element add:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

That should fix it, or at least allow further debugging...

Answered almost 7 years ago by danwellman
  • it still does not work. Check my edited question, how it looks now. TutorialPoint almost 7 years ago
  • If you are going to add script, add it to a new `<script></script>` group - See my "First off" comment Mottie almost 7 years ago