jQuery 是一種 JavaScript 庫,可以簡化 JavaScript 編程。其中一個強大的特性是可以通過 jQuery 操作 HTML 元素。本文將介紹如何使用 jQuery 實現(xiàn)超鏈接的跳轉(zhuǎn)動畫效果。
$('a').click(function(event) { event.preventDefault(); // 阻止默認(rèn)的跳轉(zhuǎn)行為 var pageTarget = $(this).attr('href'); // 獲取目標(biāo)頁面的鏈接 $('body').fadeOut(500, function() { // 頁面淡出效果 window.location = pageTarget; // 跳轉(zhuǎn)到目標(biāo)頁面 }); });
以上代碼為一個普通的 jQuery 事件綁定代碼,監(jiān)聽<a>
標(biāo)簽的點擊事件。首先,調(diào)用事件的preventDefault()
方法,以阻止默認(rèn)的超鏈接跳轉(zhuǎn)行為。
接著,獲取目標(biāo)頁面的鏈接,即事件目標(biāo)<a>
標(biāo)簽的href
屬性值。在代碼塊中,首先使用fadeOut()
方法實現(xiàn)頁面由不透明到透明的過渡效果,代碼中的 "500" 為過渡時間。隨著頁面的逐漸淡出,最后調(diào)用 JavaScript 原生的window.location
實現(xiàn)頁面跳轉(zhuǎn)到目標(biāo)鏈接。
以上就是使用 jQuery 實現(xiàn)超鏈接跳轉(zhuǎn)動畫的代碼實現(xiàn)方法。