jquery實現(xiàn)兩個圖片漸變切換效果的方法

更新時間：2015年06月25日 12:19:40 作者：不吃皮蛋

這篇文章主要介紹了jquery實現(xiàn)兩個圖片漸變切換效果的方法,涉及jquery針對圖片的顯示與隱藏效果的實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了jquery實現(xiàn)兩個圖片漸變切換效果的方法。分享給大家供大家參考。具體如下：

這段代碼演示了jquery如何實現(xiàn)兩個圖片漸變切換的效果，為id=kitten的div設置一個背景圖片，通過jquery對div進行淡入淡出實現(xiàn)兩個圖片的漸變切換

html代碼

<div id="kitten">
  <img src="/images/kitten.jpg" alt="Kitten" />
</div>

jquery代碼

$("#kitten").hover(function(){
  $(this).find("img").fadeOut();
}, function() {
  $(this).find("img").fadeIn();
});

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

您可能感興趣的文章:

easyui取消表單實時驗證,提交時統(tǒng)一驗證的簡單實例
下面小編就為大家?guī)硪黄猠asyui取消表單實時驗證,提交時統(tǒng)一驗證的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
jQuery?獲取與設置元素屬性的詳細方法(看完這篇文章就搞明白了)
這篇文章帶領大家熟練掌握?jQuery?的屬性方面的操作，包括固有屬性的獲取與設置，自定義屬性的獲取與設置等等，走進?jQuery?的更深層次階段，這也是腳本之家小編發(fā)現(xiàn)的一篇比較實用的文章
2023-06-06
jQuery實現(xiàn)的兩種簡單彈窗效果示例
這篇文章主要介紹了jQuery實現(xiàn)的兩種簡單彈窗效果,結合實例形式分析了jQuery實現(xiàn)淡入彈窗及滑動彈窗的相關操作技巧,需要的朋友可以參考下
2018-04-04
ExtJs動態(tài)生成treepanel的Json格式
這篇文章主要介紹了ExtJs動態(tài)生成treepanel的Json格式的相關資料,需要的朋友可以參考下
2015-07-07
jQuery+HTML5實現(xiàn)WebGL高性能煙花綻放動畫效果【附demo源碼下載】
這篇文章主要介紹了jQuery+HTML5實現(xiàn)WebGL高性能煙花綻放動畫效果,可實現(xiàn)煙花升空爆炸的絢麗動畫效果,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-08-08
了解了這些才能開始發(fā)揮jQuery的威力
下面介紹幾個jQuery常用的方法，來讓jQuery的威力發(fā)揮出來，否則只用有限的幾個方法，相對于運行速度問題，真不如不用jQuery
2013-10-10
jQuery功能函數(shù)詳解
這篇文章主要詳細介紹了一些jQuery功能函數(shù)，例如瀏覽器檢測，字符串處理、數(shù)組的編輯等,需要的朋友可以參考下
2015-02-02
解析jQueryEasyUI的使用
使用EasyUI最好的方法不是學會，所有的東西都敲一遍，你也沒辦法敲得完，而是找到一個好的文檔。本文提供文檔的下載，并對jQueryEasyUI的使用進行實例解析，需要的朋友可以參考下
2016-11-11
基于Jquery Ajax type的4種類型(詳解)
下面小編就為大家?guī)硪黄贘query Ajax type的4種類型(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
JQuery獲取文本框中字符長度的代碼
jquery 可以用text()方法來取得字符串，再用length 判斷長度，然后用substring()方法格式化截斷
2011-09-09