Question

一个人有两个对象，需要让他们两个都上课：

<script>
$(document).ready(function(){
    var delayMillis = 200; 
    $('#overtop').hover(function(){ $('#honemove').addClass('hover');}, function () { setTimeout(function() { $('#honemove').removeClass('hover'); }, delayMillis); });
    $('#overtop').hover(function(){ setTimeout(function() { $('#htwomove').addClass('hover'); }, delayMillis); }, function () { $('#htwomove').removeClass('hover'); });
});
</script>

<div id="overtop" class="overlay"></div>
<h1 id="honemove" class="h1a"><span>TITLE OF THE TITLE</span></h1>
<h2 id="htwomove"><span>INFO BELLOW TITLE</span></h2>

它目前有效，但是如果你做了很多鼠标悬停就会出现故障，CSS部分很好，我想它不喜欢在一个动作上有两个单独的脚本。

Answer 1

使用clearTimeout来防止发生任何种族情况：

＆＃13;

$(document).ready(function() {
  var $overtop = $('#overtop')
  var $honemove = $('#honemove')
  var $htwomove = $('#htwomove')
  
  var delay = 200
  var token
  
  $overtop.hover(function() {
    clearTimeout(token)
    $honemove.addClass('hover')
    token = setTimeout(function() {
      $htwomove.addClass('hover')
    }, delay)
  }, function() {
    clearTimeout(token)
    $htwomove.removeClass('hover')
    token = setTimeout(function() {
      $honemove.removeClass('hover')
    }, delay)
  })
});

＆＃13;

.hover {
  color: #f00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overtop" class="overlay">Overlay</div>
<h1 id="honemove" class="h1a"><span>TITLE OF THE TITLE</span></h1>
<h2 id="htwomove"><span>INFO BELLOW TITLE</span></h2>

＆＃13;

在setTimeout

1 个答案: