利用JQuery動(dòng)畫(huà)制作滑動(dòng)菜單項(xiàng)效果實(shí)現(xiàn)步驟及代碼
更新時(shí)間：2013年02月07日 09:07:35 作者：
滑動(dòng)菜單項(xiàng)效果,聽(tīng)起來(lái)就是很時(shí)尚的一個(gè)效果，不過(guò)實(shí)現(xiàn)起來(lái)有些麻煩，還好有本文的出現(xiàn)，可以幫助你解決這個(gè)困惑，熱愛(ài)特效的你可不要錯(cuò)過(guò)了哈，好了話不多說(shuō)切入正文
效果：
點(diǎn)擊第二個(gè)菜單項(xiàng)后出現(xiàn)一個(gè)向上滑動(dòng)的動(dòng)畫(huà)，控制margin-top底部另一個(gè)div中的文字
上移從而替換掉原有的文字。
原理其實(shí)不難無(wú)非就是css的控制加之jquery的代碼
對(duì)docemnt中所有l(wèi)i綁定一個(gè)hover事件，事件中根據(jù)鼠標(biāo)的狀態(tài)（無(wú)非是移入與移除），
使用animate的動(dòng)畫(huà)方式使原有的div向上移70px，移出時(shí)再將頁(yè)面效果變回原有的樣子。
代碼如下：
復(fù)制代碼 代碼如下:
$(function () {
var webNav = {
val: {
target: 0
},
init: function () {
$(".gnb ul li").on("hover", webNav.hover);
},
hover: function (e) {
if ($(this).index() == webNav.val.target) { return };
if (e.type == "mouseenter") {
$(this).find("a>p").stop(true, true).animate({ "margin-top": "-70px" }, 300);
} else if (e.type == "mouseleave") {
$(this).find("a>p").stop(true, true).animate({ "margin-top": "0px" }, 300);
}
}
};
webNav.init();
});
您可能感興趣的文章:
相關(guān)文章
在一些圖片比較多的網(wǎng)站上會(huì)出現(xiàn)訪問(wèn)時(shí)圖片不存在的情況：默認(rèn)顯示出來(lái)的樣子很不雅觀,可以解決圖片不存在時(shí)，使用其他的圖片替換嗎，答案是可以的；感興趣的朋友可以了解下，或許本文可以幫助到你2013-02-02
alertifyjs是一個(gè)非侵入式，可定制的JavaScript通知組件。包括可定制的對(duì)話框，和右下角消息彈出框。完全可定制的警報(bào)，確認(rèn)和提示對(duì)話框、完全自定義的通知系統(tǒng)、回調(diào)參數(shù)處理包括“確定“和”取消“按鈕的點(diǎn)擊、允許對(duì)話框排隊(duì)2015-04-04
Jquery實(shí)現(xiàn)無(wú)刷新DropDownList聯(lián)動(dòng)實(shí)現(xiàn)代碼
隨著Jquery1.4的發(fā)布，Jquery運(yùn)用越來(lái)越多了，讓我們來(lái)實(shí)現(xiàn)以前經(jīng)常用到的DropDownList無(wú)刷新聯(lián)動(dòng)。2010-03-03
本文主要分享了jquery實(shí)現(xiàn)百葉窗效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
從DOM中刪除所有匹配的元素。這個(gè)方法不會(huì)把匹配的元素從jQuery對(duì)象中刪除，因而可以在將來(lái)再使用這些匹配的元素。但除了這個(gè)元素本身得以保留之外，其他的比如綁定的事件，附加的數(shù)據(jù)等都會(huì)被移除。我的理解就是將元素移除了。2015-08-08
jqGrid 學(xué)習(xí)筆記整理——進(jìn)階篇(一 )
這篇文章主要介紹了jqGrid 學(xué)習(xí)筆記整理——進(jìn)階篇(一 )的相關(guān)資料,需要的朋友可以參考下2016-04-04
自己動(dòng)手實(shí)現(xiàn)jQuery Callbacks完整功能代碼詳解
最近大量的用到j(luò)Query Callbacks 對(duì)象，jQuery庫(kù)中的$.ajax()和$.Deferred() 對(duì)象也是基于這個(gè)對(duì)象實(shí)現(xiàn)，下面我們也模擬實(shí)現(xiàn)jQuery Callbacks 對(duì)象的部分功能2013-11-11
jquery庫(kù)給我們帶來(lái)了很多方便的地方，使用jquery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的下拉菜單已經(jīng)是很簡(jiǎn)單了，但也有不同的實(shí)現(xiàn)方法。今天自己使用jquery寫(xiě)了一個(gè)下拉菜單，參考了Xiaofeng Wang的SexyDropDownMenu2010，其中還是有一些東西感覺(jué)值得記錄一下。2015-11-11
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)儀表盤(pán)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
jquery ztree實(shí)現(xiàn)樹(shù)的搜索功能
這篇文章主要為大家詳細(xì)介紹了jquery ztree實(shí)現(xiàn)樹(shù)的搜索功能，zTree是利用 JQuery 的核心代碼，實(shí)現(xiàn)一套能完成大部分常用功能的Tree插件，對(duì)ztree感興趣的小伙伴們可以參考一下2016-02-02