Image gallery broken as "slideSwitch is not defined" :-(

I'm just starting to learn Jquery, and have done a few tutorials, frustratingly, this one is one of the most basic I've done, and I can't seem to get it working.

This is the tutorial I'm following:- http://jonraasch.com/blog/a-simple-jquery-slideshow

When I start the page up, and run debug in Chrome and firebug in firefox I get the error:- "Uncaught ReferenceError: slideSwitch is not defined"

This is my code:-

$(document).ready(function(){
 开发者_如何学运维  function slideSwitch(){
       var $active = $('#slideshow IMG.active');
       var $next = $active.next();

       $active.addClass('last-active');

       $next.css({opacity: 0.0})
         .addClass('active')
         .animate({opacity:1.0}, 1000, function() {
              $active.removeClass('active last-active');
         });
  }
  $(function (){
      setInterval( "slideSwitch()", 5000 );
  });
});

As far as I can tell, I've defined the function slideSwitch correctly, and no one else in the comments box has had this problem. I'm sure its something really simple I'm doing wrong.

Your slideSwitch function isn't defined in the global scope (only inside that .ready() hadler), and when you pass a string to setInterval() that's where it's looking, instead do this:

$(function(){
   function slideSwitch(){
       var $active = $('#slideshow IMG.active');
       var $next = $active.next();

       $active.addClass('last-active');

       $next.css({opacity: 0.0})
         .addClass('active')
         .animate({opacity:1.0}, 1000, function() {
              $active.removeClass('active last-active');
         });
  }
  setInterval(slideSwitch, 5000 );
});

For the record, this would still work (where you have it, since it's in a parent scope):

$(function (){
  setInterval(slideSwitch, 5000);
});

But...you're already in a document.ready handler, so there's no need for the wrapper here.