jQuery中fadein與fadeout方法用法示例

更新時(shí)間：2016年09月16日 00:48:03 作者：永遠(yuǎn)愛(ài)好寫(xiě)程序

這篇文章主要介紹了jQuery中fadein與fadeout方法用法,結(jié)合實(shí)例形式分析了jQuery使用fadein與fadeout方法實(shí)現(xiàn)頁(yè)面元素淡入淡出效果的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery中fadein與fadeout方法用法。分享給大家供大家參考，具體如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    *{font-size:12px;}
    div{width:600px;margin:auto;}
    #control{background-color:gold;padding:10px;margin-bottom:10px;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#btnfadeIn").click(function () {
        $("#message").fadeIn(1000);
      });
      $("#btnfadeOut").click(function () {
        $("#message").fadeOut(1000);
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnfadeIn" type="button" value="淡入div" />
    <input id="btnfadeOut" type="button" value="淡出div" />
  </div>
  <div id="message">
    mouseover、mouseenter的區(qū)別：div里套div。見(jiàn)備注。和事件冒泡有關(guān)系。<br /> 
    不論鼠標(biāo)指針穿過(guò)被選元素或其子元素，都會(huì)觸發(fā) mouseover 事件 <br />
    只有在鼠標(biāo)指針穿過(guò)被選元素時(shí)，才會(huì)觸發(fā) mouseenter 事件(穿過(guò)子元素不會(huì)觸發(fā))
  </div>
</body>
</html>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery學(xué)習(xí)筆記之無(wú)new構(gòu)建詳解
大部分人使用 jQuery 的時(shí)候都是使用第一種無(wú) new 的構(gòu)造方式，直接 $('') 進(jìn)行構(gòu)造，這也是 jQuery 十分便捷的一個(gè)地方。這篇文章主要給大家介紹了關(guān)于jquery學(xué)習(xí)筆記之無(wú)new構(gòu)建的相關(guān)資料，需要的朋友們下面來(lái)一起看看吧。
2017-12-12
jquery UI Datepicker時(shí)間控件的使用方法（終結(jié)版）
這篇文章是jquery UI Datepicker時(shí)間控件的使用方法終結(jié)版，可以說(shuō)是技術(shù)的升華，實(shí)現(xiàn)的功能有限制的開(kāi)始時(shí)間和結(jié)束時(shí)間跨度不超過(guò)三天，并配置有清空時(shí)間，重選時(shí)間等，感興趣的小伙伴們可以參考一下
2015-11-11
jQuery的運(yùn)行機(jī)制和設(shè)計(jì)理念分析
jQuery是一個(gè)非常優(yōu)秀的JavaScript庫(kù)，與Prototype,YUI,Mootools等眾多的Js類庫(kù)相比，它劍走偏鋒，從Web開(kāi)發(fā)實(shí)用的角度出發(fā)，拋除了其它Lib中一些不實(shí)用的東西，為開(kāi)發(fā)者提供了短小精悍的類庫(kù)。
2011-04-04
jquery實(shí)現(xiàn)帶漸變淡入淡出并向右依次展開(kāi)的多級(jí)菜單效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)帶漸變淡入淡出并向右依次展開(kāi)的多級(jí)菜單效果,涉及jquery鼠標(biāo)事件及頁(yè)面元素動(dòng)態(tài)樣式設(shè)置的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
jQuery中ScrollTo用法示例
這篇文章主要介紹了jQuery中ScrollTo用法,結(jié)合實(shí)例形式分析了jQuery中ScrollTo的功能、使用方法與相關(guān)操作技巧,需要的朋友可以參考下
2016-09-09
jQuery插件FusionCharts繪制的3D環(huán)餅圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D環(huán)餅圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用FusionCharts載入xml格式數(shù)據(jù)繪制圖形的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-04-04
jquery插件bootstrapValidator表單驗(yàn)證詳解
這篇文章主要為大家詳細(xì)介紹了jquery插件bootstrapValidator表單驗(yàn)證，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
使用EVAL處理jqchart jquery 折線圖返回?cái)?shù)據(jù)無(wú)效的解決辦法
eval函數(shù)可以把一些處理過(guò)程序代碼進(jìn)行解析從而達(dá)到可以執(zhí)行的一個(gè)狀態(tài)，本篇文章給大家介紹使用eval處理jqchart jquery折線圖返回?cái)?shù)據(jù)無(wú)效的解決辦法，對(duì)jqchart jquery相關(guān)內(nèi)容感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
jQuery插件ajaxFileUpload實(shí)現(xiàn)異步上傳文件效果
jQuery插件AjaxFileUpload用來(lái)實(shí)現(xiàn)ajax文件上傳，該插件使用非常簡(jiǎn)單，接下來(lái)我們來(lái)看下用AjaxFileUpload插件實(shí)現(xiàn)文件上傳的方法，有需要的小伙伴可以參考下
2015-04-04
jQuery層動(dòng)畫(huà)定位滑動(dòng)效果的方法
這篇文章主要介紹了jQuery層動(dòng)畫(huà)定位滑動(dòng)效果的方法,涉及jQuery中animate方法的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-04-04