Question

我想在div徘徊1500毫秒之后fadeIn()。我如何检查用户是否悬停1500毫秒

<div id=bla>Hover this</div>

var bla = $('#bla');

bla.hover(function(){       
        bla.hide().html("HEHE").fadeIn("slow");
});

2 个答案:

答案 0 :(得分：5)

答案 1 :(得分：4)

Answer 1

可以使用setTimeout，如果用户离开setTimeout，只需清除bla：

var timeout,
bla = $('#bla');

bla.hover(
  function () {
    timeout = setTimeout( function() {       
      bla.hide().html("HEHE").fadeIn("slow")
    }, 1500);
  }, 
  function () {
    clearTimeout(timeout);
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bla">Text</div>

Answer 2

你使用自定义标志加上setTimeout和hoverOut（http://api.jquery.com/hover/）

(function() {                                   // Scope protected
  var bla = $('#bla');                          // Your div
  var timeout;                                  // Variable to store the setTimeout id

  bla.hover(function() {                        // Hover can take two callbacks
    timeout = setTimeout(function() {           // On hover, we setTimeout and store it
      bla.hide().html("HEHE").fadeIn("slow");   // 1500ms later, we fadeIn
    }, 1500);
  }, function () {                              // Unhover callback
    clearTimeout(timeout);                      // We simply clear the timeout
  });
})();                                           // Directly calling the scope

我们在悬停时设置了超时回调，但是我们在取消切换时将其清除。

悬停几秒后启动功能

2 个答案: