Javascript jQuery:Mouseover超时

我有这样的剧本

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

正如您从上面的脚本中注意到的，如果我们将鼠标悬停在

$（'.parent a'）

上，那么它的同级将扩展它的宽度

现在，如果我们鼠标悬停在上面，它的兄弟姐妹会立即出现，我想让它发生在我们鼠标悬停在

5秒之后

如何制作？
请注意，我添加了单独的事件侦听器，而不是在事件处理程序中测试不同的事件类型

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

这背后的想法是设置一个计时器，当用户鼠标越过锚时运行。如果它们在计时器触发之前鼠标悬停，则清除计时器以停止事件的发生。否则，当计时器启动时，它将按照原始脚本展开元素

另外，通过让jQuery只遍历DOM一次，并将结果存储在$Sibling中，我们可以加快脚本的速度

为了测试这一点，我使用了以下HTML

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


世界
请注意，我添加了单独的事件侦听器，而不是在事件处理程序中测试不同的事件类型

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

这背后的想法是设置一个计时器，当用户鼠标越过锚时运行。如果它们在计时器触发之前鼠标悬停，则清除计时器以停止事件的发生。否则，当计时器启动时，它将按照原始脚本展开元素

另外，通过让jQuery只遍历DOM一次，并将结果存储在$Sibling中，我们可以加快脚本的速度

为了测试这一点，我使用了以下HTML

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


世界
您可以使用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);
}

您可以使用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);
}

您希望通过和清除通过在此处存储计时器，但您始终希望每个元素都存储计时器，您可以通过这样做：

$('.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);
    }
  }
});

，我发现上面的内容在jQuery 1.4.3+中更容易阅读，但如果您使用的是早期版本，只需像以前一样格式化即可：

$('.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);
    }
  }
});

.
您希望通过和清除通过在此处存储计时器，但您始终希望通过每个元素执行此操作，您可以通过执行此操作，如下所示：

$('.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);
    }
  }
});

，我发现上面的内容在jQuery 1.4.3+中更容易阅读，但如果您使用的是早期版本，只需像以前一样格式化即可：

$('.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);
    }
  }
});