Jquery .on ("mouseenter") - chờ 2 giây sau đó thực hiện hành động

Tôi có một tập lệnh hiển thị văn bản ẩn khi bạn di chuột qua div. Nhưng tôi muốn nó bị trì hoãn 2 giây và nếu người dùng di chuyển chuột ra trước 2 giây thì tôi không muốn hiển thị gì cả.Jquery .on ("mouseenter") - chờ 2 giây sau đó thực hiện hành động

Làm cách nào để thực hiện việc này?

Những gì tôi có:http://jsfiddle.net/ZhrJT/

HTML:

<body> 
    <div>hover this</div> 
    <p class="hidden">unhidden!!</p> 
</body>

JS:

$("body").on("mouseenter", "div", function(){ 
    $("p").removeClass("hidden"); 
}).on("mouseleave", "div", function(){ 
    $("p").addClass("hidden"); 
});

.210

CSS:

div { 
    background-color:red; 
    height:100px; 
} 

p.hidden { 
    display:none; 
} 

p { 
    background-color:yellow; 
    height:100px; 
}

Nguồn

2012-01-26 supercoolville

http://cherne.net/brian/resources/jquery.hoverIntent.html có thể là những gì bạn đang tìm kiếm – PeeHaa

var timer; 
$("body").on("mouseenter", "div", function(){ 
    timer = setTimeout(function() { 
     $("p").removeClass("hidden"); 
    }, 2000); 
}).on("mouseleave", "div", function(){ 
    clearTimeout(timer); 
    $("p").addClass("hidden"); 
});

Có ya đi, đó là dễ dàng. Chỉ cần đặt thời gian chờ sẽ ẩn phần tử khi nó chạy và hủy thời gian chờ nếu phần tử của người dùng mouseleave s.

Nguồn

2012-01-26 20:51:38 Jasper

1 cho đánh tôi –

nhờ !!!!!!!! !!!!!!!!!!!!!!! – supercoolville

omg các bạn nhanh chóng ... làm việc tốt ... tôi trông giống hệt nhau :) –

Sử dụng setTimeout/clearTimeout. Một cái gì đó như thế này:

$("body").on("mouseenter", "div", function(){ 
    $(this).data('timeout', setTimeout(function(){ 
     $("p").removeClass("hidden"); 
    }, 2000)); 
}).on("mouseleave", "div", function(){ 
    clearTimeout($(this).data('timeout')); 
    $("p").addClass("hidden"); 
});

Nguồn

2012-01-26 20:52:20

Jquery .on ("mouseenter") - chờ 2 giây sau đó thực hiện hành động

Trả lời

Các vấn đề liên quan