JQuery 是一個 JavaScript 函數庫,它是一款開源的、快速而簡潔的 JavaScript 庫,最重要的是,與 JavaScript 相比,它提供了更加便捷的 DOM 操作方法和封裝的 AJAX 實現。
今天我來介紹如何通過 JQuery 來實現一個懸浮消失的效果,其中在代碼中涉及到的時間間隔均由我們自己來設置。
$(function() { var timeout; $('.sensitive').hover(function() { clearTimeout(timeout); $(this).stop(true, true).show(); }, function() { var $self = $(this); timeout = setTimeout(function() { $self.fadeOut('fast'); }, 1000); }); });
在這個實例中,我們首先利用 JQuery 選擇器找到所有具有 .sensitive 類名的元素。在該元素上鼠標懸浮時,我們需要清除上一次未觸發的延遲事件并終止上一次正在執行的動畫效果。同時,我們也需要使 .sensitive 元素顯式地出現。在鼠標離開元素的時候,我們定義了延遲事件,也即在一定時間內未觸發事件,則執行淡出該元素的動畫,并且動畫執行的時間間隔也是由我們自己設置的。
在使用 JQuery 開發我們的網頁時,我們不僅可以利用現成的函數和方法,同時也能夠自己定義一些方法和函數來滿足我們自己的需求。希望這篇文章能夠對大家有所幫助,也讓我們更加深入地了解和熟練使用 JQuery 庫。
下一篇css 只顯示1行