javascript - jQuery detect how many seconds a mouse stays over element

Question

is there any way to detect how many seconds a mouse pointer stays on an html element?

I would like to retrieve how many seconds a mouse stays over element to put a little delay on a callback event... if is possible :)

i'm trying with a simple for() cycle detecting by a counter :

var time_over ; 
$('.bean-active').live('mouseover',function(){  
  id_tag = $(this).attr("id");   
  for(time_over = 1;time_over <= 3000;time_over ++){
      if(time_over == 3000){
         $('.bean-bubble,.bean-bubble img').hide();   
         $('#bean-bubble-'+id_tag+',#bean-bubble-'+id_tag+' img').show();
      }  
  }   
});

the problem is that it doesn't works :(

also i would like to bind a mouseleave event, script logic should be:

while ( mouseover element count how many time it stays over) 
  if (time == n)
  { do somenthing } 
if (mouseleave from element earlier then time)
{ do somenthing different }

Answer 1

Given this markup:

<div id="hoverOverMe">Hover over me</div>
<div id="output"></div>

Something like this plugin should do the trick:

(function($) {
    $.fn.delayedAction = function(options)
    {
        var settings = $.extend(
            {},
            {
                delayedAction : function(){},
                cancelledAction: function(){},
                hoverTime: 1000               
            },
            options);

        return this.each(function(){
           var $this = $(this);
            $this.hover(function(){  
               $this.data('timerId',
                          setTimeout(function(){
                                      $this.data('hover',false);
                                      settings.delayedAction($this);
                                      },settings.hoverTime));
                $this.data('hover',true);
            },
            function(){        
                if($this.data('hover')){       
                    clearTimeout($this.data('timerId'));
                    settings.cancelledAction($this);
                }
                $this.data('hover',false);
            } );
        });
    }
})(jQuery);

and the calling code:

$('#hoverOverMe').delayedAction (
    {
        delayedAction: function($element){
            $('#output').html($element.attr('id') + ' was hovered for 3 seconds');
        },
        cancelledAction: function($element){
            $('#output').html($element.attr('id') + ' was hovered for less than 3 seconds');
        },
        hoverTime: 3000 // 3 seconds
    }
);

Live example: http://jsfiddle.net/nrUqS/

For your requirement, something like this should suffice:

$('.bean-active').delayedAction(
{ 
   delayedAction: function($element){  
       id_tag = $element.attr("id");   
       $('.bean-bubble,.bean-bubble img').hide();   
       $('#bean-bubble-'+id_tag+',#bean-bubble-'+id_tag+' img').show();
    },
    hoverTime: 3000
});