Multiple jQuery rollover/out button timeout issue?

Question

I am currently setting up a series of buttons, each with a title that reveals more information on rollover. The layout of the page is designed so an intro section sits in the middle, with the buttons around it. Rolling over any of the buttons fires a function to hide the intro and then show more information about which ever button is being interacted with. On roll out, I'd like the intro to be shown again, but after a timeout.

I'm having some issues with the timeout not working - the introshow function does not seem to fire.

I've tried to keep the example simple - in reality the introshow function will include some animation but that's irrelevant as its the timeout function I'm having issues with. I'm still quite a newbie when it comes to jQuery!

>> I've created a fiddle for this also

JS:

    $(document).ready(function() {

      $('div.pcontents > div').addClass('hidden');

      $('.person').each(function() {
        var theClass = $(this).attr('id');
        var $person = $(this)

        $person.hover(

        function() { // RollOver
           var index = 0;
          console.log('roll over')
          introhide();
          $('.pcontents .' + theClass).removeClass('hidden');
          $person.addClass('active');

        }, function() { // RollOut
          console.log('roll out')
          $('.pcontents .' + theClass).addClass('hidden');
          $person.removeClass('active');
          $(function() {

            setTimeout(function() {
              introshow();
            }, 2000 + index++);

          });
        });

      });

      var introhide = function() {
        $('#intro').addClass('hidden');
      }
      var introshow = function() {
        $('#intro').removeClass('hidden');
      }

    });

Here is the HTML

<div id="wrap">

<div id="persons">

    <dl class="person" id="pone">
        <dd>The first person</dd>
    </dl>   

    <dl class="person" id="ptwo">
        <dd>The second person</dd>
    </dl>   

    <dl class="person" id="pthree">
        <dd>The third person</dd>
    </dl>   

    <dl class="person" id="pfour">
        <dd>The forth person</dd>
    </dl>
</div>

<div class="pcontents">
    <div class="pone">  
        <h3>Person One</h3>
        <p>Description one</p>
    </div>
    <div class="ptwo">  
        <h3>Person two</h3>
        <p>Description two</p>
    </div>
    <div class="pthree">  
        <h3>Person three</h3>
        <p>Description three</p>
    </div>
    <div class="pfour">  
        <h3>Person four</h3>
        <p>Description four</p>
    </div>

</div>

<div id="intro">
    <p>This is the intro</p>
</div>

If anyone can help me that would be great.

Rich

Answer 1

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
        });
    });
});