jQuery: Mouseover Timeout

i have script like this

$('.parent a').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover'){
        if ($(this).siblings('.child').css('width') == '0px'  ){
            开发者_JS百科$(this).siblings('.child').animate({'width': window.innerWidth}, 500);
        }
    }else{
        if ( !$(this).hasClass('active') ){
            $(this).siblings('.child').animate({'width': 0}, 500);
        }
    }
});

as you notice from script above, if we mouse over $('.parent a') then it's sibling will expand it width.

for now its siblings exapnd instantly if we mouse over, i want to make it happen when we already mouse over after 5 seconds

how to make it?

Note that I have added separate event listeners rather than testing inside the event handler for the different event types.

var timer;

$('.parent a').live('mouseover', function(event) {
    $Sibling = $(this).siblings(".child");
    timer = window.setTimeout(function() {
        if ($Sibling.css('width') == '0px'  ){
            $Sibling.animate({'width': window.innerWidth+"px"}, 500);
        }}, 5000);
});

$('.parent a').live('mouseout', function(event) {
    if (timer) {
        window.clearTimeout(timer);
    }
    if ( !$(this).hasClass('active') ){
        $(this).siblings('.child').animate({'width': "0px"}, 500);
    }
});

The idea behind this is that you set a timer to run when the user mouse-overs the anchor. If they mouse-out before the timer has triggered, you clear the timer to stop the event from happening. Otherwise, when the timer fires, it will expand the element as per your original script.

Also, by getting jQuery to traverse the DOM just once, and storing the result in $Sibling, we make the script faster.

To test this, I have used the following HTML.

    <div class="parent">
        <a href="#">Hello</a>
        <div class="child" style="background-color: Aqua; display: block; width: 0px; overflow: hidden;">World</div>
    </div>

you can use setTimeout

$('.parent a').live('mouseover mouseout', function(event) {
    var elements = $(this).siblings('.child');
    if ($(this).siblings('.child').css('width') == '0px'  ){
        setTimeout(animate(elements, window.innerWidth), 5000);
    }
}else{
    if ( !$(this).hasClass('active') ){
        setTimeout(animate(elements, 0), 5000);
    }

});

function animate(elements, width) {
    elements.animate({'width': width}, 500);
}

You want to store a timer here via setTimeout() and cleared via clearTimeout(), but you always want to do it per element, which you can do via $.data(), like this:

$('.parent a').live({
  mouseover: function() {
    var self = this;
    $.data(this, "timer", setTimeout(function() {
      if ($(self).siblings('.child').css('width') == '0px'  ){
        $(self).siblings('.child').animate({'width': window.innerWidth}, 500);
      }
    }, 5000));
  },
  mouseout: function() {
    clearTimeout($.data(this, "timer"));
    if ( !$(this).hasClass('active') ){
      $(this).siblings('.child').animate({'width': 0}, 500);
    }
  }
});

You can test it out here, I find the above easier to read in jQuery 1.4.3+, but if you're using an earlier version, just format it like you had before:

$('.parent a').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover'){
    var self = this;
    $.data(this, "timer", setTimeout(function() {
      if ($(self).siblings('.child').css('width') == '0px'  ){
        $(self).siblings('.child').animate({'width': window.innerWidth}, 500);
      }
    }, 5000));
  }else{
    clearTimeout($.data(this, "timer"));
    if ( !$(this).hasClass('active') ){
      $(this).siblings('.child').animate({'width': 0}, 500);
    }
  }
});

You can confirm that works here.