JQuery實現(xiàn)鼠標移動圖片顯示描述層的方法

更新時間：2015年06月25日 10:29:27 作者：任意球

這篇文章主要介紹了JQuery實現(xiàn)鼠標移動圖片顯示描述層的方法,涉及jQuery鼠標事件及動畫效果的使用技巧,需要的朋友可以參考下

本文實例講述了JQuery實現(xiàn)鼠標移動圖片顯示描述層的方法。分享給大家供大家參考。具體如下：

這里可結合 JQuery easing 的動畫來配合使用。

主要代碼如下：

$(".item").hover(
function()
{
//$(this).children("img").stop().animate({opacity: 0.8}, 700, "easeInSine");
$(this).children("div.title").stop().animate({top: 0}, 700, "easeOutBounce");
$(this).children("div.desc").stop().animate({bottom: 0}, 700, "easeOutBounce");
},
function(){
//$(this).children("img").stop().animate({opacity: 1}, 700);
$(this).children("div.title").stop().animate({top: -60}, 500);
$(this).children("div.desc").stop().animate({bottom: -40}, 400);
}
);

希望本文所述對大家的jQuery程序設計有所幫助。

您可能感興趣的文章:

jquery寫個checkbox——類似郵箱全選功能
最近在學習jquery，今天抽空用jquery寫個checkbox——類似郵箱全選功能，感興趣的你可以參考下哈，希望可以幫助到你
2013-03-03
jquery+html5制作超酷的圓盤時鐘表
此作品是一款jquery+html5實現(xiàn)的時鐘插件clock，效果非常棒，推薦給大家參考下，小伙伴們可以直接拿走使用。
2015-04-04
jQuery EasyUI API 中文文檔 - Dialog對話框
jQuery EasyUI API 中文文檔 - Dialog對話框使用說明，需要的朋友可以參考下。
2011-11-11
Jquery瀑布流插件使用介紹
瀑布流布局在目前貌似很火爆，具體的分析、原理、用到的知識等等可以看看以下幾位牛人寫的東西
2012-10-10
jQuery中操控hidden、disable等無值屬性的方法
在實現(xiàn)一些表單提交頁面時會放置若干隱藏屬性，下面為大家介紹下jQuery中如何操控hidden、disable等無值屬性，感興趣的朋友不要錯過
2014-01-01
jQuery返回定位插件詳解
本篇文章主要介紹了jQuery返回定位插件的相關知識，具有很好的參考價值。下面跟著小編一起來看下吧
2017-05-05
文件編碼導致jquery失效的解決方法
本篇文章是對文件編碼導致jquery失效的解決方法進行了詳細的分析介紹，需要的朋友參考下
2013-06-06
jQuery實現(xiàn)form表單序列化轉換為json對象功能示例
這篇文章主要介紹了jQuery實現(xiàn)form表單序列化轉換為json對象功能,結合實例形式分析了表單數(shù)據(jù)傳輸中使用serializeJson進行序列化操作相關實現(xiàn)技巧,需要的朋友可以參考下
2018-05-05
jQuery 網(wǎng)易相冊鼠標移動顯示隱藏效果實現(xiàn)代碼
顯示隱藏效果的實現(xiàn)主要是jquery層選擇器的應用：當鼠標移動經(jīng)過照片就顯示設為封面刪除，移開后就隱藏，此效果在web開發(fā)中經(jīng)常會用到，感興趣的朋友可以參考下哈
2013-03-03
jQuery遍歷Form示例代碼
取得id為form1的form的所有輸入變量，然后使用for循環(huán)進行數(shù)組遍歷，具體實現(xiàn)如下，感興趣的朋友可以參考下
2013-09-09