Question

I have a mouseover function but when I try to fade in the optionbox, it does it to all the classes named ‘box’. I have tried to set this in there but my jquery-skills (if I have some already) are letting me down.

Aside from this problem the code is working fine.

   $(".box").live({
    mouseenter:
       function()
       {
        optionsTimeout = setTimeout(

            function() {
                $('.optionbox').fadeIn(200);
            }

        , 1000);
       },
    mouseleave:
       function()
       {
        clearTimeout(optionsTimeout);
        $('.optionbox').fadeOut(200);
       }
   }
);

HTML:

<div class="box">
    <div class="optionbox"><a href="">Delete</a></div>
</div>
<div class="box">
    <div class="optionbox"><a href="">Delete</a></div>
</div>

Answer 1

mouseenter: function() {
    (function (self) {
        var optionsTimeout = setTimeout(function() { 
            $('.optionbox', self).fadeIn(200); 
        }, 1000);
        self.data('showTimeout', optionsTimeout);
    })($(this)); 
},
mouseleave: function () {
   var self = $(this),
       optionsTimeout = self.data('showTimeout');
   clearTimeout(optionsTimeout);
   $('.optionbox', this).fadeOut(200);
}

You need to tell jQuery to use elements within the contextual .box, therefore the use of $(selector, context).

The enclosing function with self is to save a reference to the context inside the execution of the timeout, so you pass it as a parameter of a self-executable function, and when the timeout expires it will have a reference to the executing .box

You could also encounter problems by using the same global variable for all timeouts, so you shoul save the contextual timeout code for each one, in my example I use $.data to save the code, and restore it.