javascript - jquery' title




在一定時間後啟用懸停事件 (2)

這個問題在這裡已經有了答案:

我想通過jQuery在一定的時間間隔內停用錨標籤上的懸停事件。

例如:我有一些CSS錨點(<a href =“”>)元素的懸停效果。 當我把鼠標懸停時,我想讓它等待一定的時間(500ms左右),然後開始渲染懸停效果。

這樣的事情可能嗎?

$("#navigation").hover(function () {
        $("li.has-submenu").off('hover');
        setTimeout(function () {
            $("li.has-submenu").on('hover');
        }, 1000);
    });

我想你想要這樣的東西:

<div id='a' style="border:2px solid black" >
       <h3>Hove On me</h3>
           For 2000 milliseconds. You will get an alert.
       </br>
</div>




$(document).ready(function(){
   var delay=2000, setTimeoutConst;
   $('#a').hover(function(){
        setTimeoutConst = setTimeout(function(){
            /* Do Some Stuff*/
           alert('Thank You!');
        }, delay);
   },function(){
        clearTimeout(setTimeoutConst );
   })
})

DEMO: http : //jsfiddle.net/faj81qa0/


我最近檢查了,到2015年,這意味著你可以使用CSS3。

以下將在500ms後開始動畫所有鏈接的背景顏色。

沒有jQuery或任何JavaScript的需要。

a {
  -webkit-transition: all 500ms ease-in;
  -moz-transition: all 500ms ease-in;
  -ms-transition: all 500ms ease-in;
  -o-transition: all 500ms ease-in;
  transition: all 500ms ease-in;
}

a:hover {
  background-color: #c00;    
  transition-delay: 500ms;
}
<a href="">Hover me</a>

但是,如果您絕對需要使用JavaScript,則可以使用setTimeout將懸停類應用於元素:

jQuery(function($) {
  $("a").hover(function() {
    var el = $(this);
    var timeout = setTimeout(function() {
      el.addClass("hover");
    }, 500);
    el.data("timeout", timeout);
  }, function() {
    clearTimeout($(this).removeClass("hover").data("timeout"));
  });
});
a {
  -webkit-transition: all 500ms ease-in;
  -moz-transition: all 500ms ease-in;
  -ms-transition: all 500ms ease-in;
  -o-transition: all 500ms ease-in;
  transition: all 500ms ease-in;
}

a.hover {
  background-color: #c00;    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="">Hover me</a>







hover