ReferenceError: index is not defined
The scope of the index
variable is makes it inaccessible to the other function, the function cannot "see it". You need to move it outside of the function definition, to be accessible to all functions:
$(document).ready(function(){
var index = 0,
timeout = 0,
introhide = function() {
$('#intro').addClass('hidden');
},
introshow = function() {
$('#intro').removeClass('hidden');
};
$('div.pcontents > div').addClass('hidden');
$('.person').each(function(){
var $person = $(this),
theClass = $this.attr('class');
$person.hover(function(){ // RollOver
if (timeout) {
clearTimeout(timeout);
timeout = 0;
}
introhide();
$('.pcontents .' + theClass).removeClass('hidden');
$person.addClass('active');
},function(){ // RollOut
if (timeout) {
clearTimeout(timeout);
timeout = 0;
}
$('.pcontents .' + theClass).addClass('hidden');
$person.removeClass('active');
timeout = setTimeout(function() {
introshow();
}, 2000 * index++); // Delay will grow after each hover event
});
});
});