jQuery兩個有意思的切換方法
作者：飛舞輕揚(yáng)在臺北
話說，JQuery中toggle這是一個好玩意，用于綁定多個事件處理器函數(shù)，以響應(yīng)被選元素的輪流click事件。如果元素是可見的，切換為隱藏。如果元素是隱藏的，切換為可見。
hover:
hover是一個自定義方法，描述的是，狀態(tài)一，狀態(tài)二，鼠標(biāo)滑動而觸發(fā)。效果與onmousemove onmouseout類似。對于這種狀態(tài)，用一個小例子來描述，其實(shí)，在復(fù)雜的動畫富web應(yīng)用中，hover的作用很廣泛。在function(){},function(){}這兩個回調(diào)函數(shù)中，足以讓我們發(fā)揮豐富的擴(kuò)展。
.hover(function(){..},function(){..});
- <!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>Untitled Page</title>
- <style type="text/css">
- #de{}
- </style>
- <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
- <script type="text/javascript">
- $(function () {
- var $de = $("#de");
- $de.hover(function () { $(this).css("background", "#ccc"); }, function () { $(this).css("background","#999"); });
- });
- </script>
- </head>
- <body>
- <a href="#" id="de">content</a>
- </body>
- </html>
toggle:
話說，JQuery中toggle這是一個好玩意，用于綁定多個事件處理器函數(shù)，以響應(yīng)被選元素的輪流click事件。如果元素是可見的，切換為隱藏。如果元素是隱藏的，切換為可見。
.toggle(function(){},function(){},....);.toggle(speed,function(){}); .toggle(speed,easing,function(){});
speed：顯示與隱藏的速度，默認(rèn)是0。
easing：指定切換效果，默認(rèn)是swing，可選linear。
.toggle()方法還有一種以switch參數(shù)的形式，比如我設(shè)置一個參數(shù)為int，$("..").toggle(int)。它的類似效果，可以如下：
int ? $("..").show() : $("..").hide();
- <!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>Untitled Page</title>
- <style type="text/css">
- #de{}
- .de{ background:#ccc; width:50px; height:50px; margin-top:50px; display:none;}
- </style>
- <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
- <script type="text/javascript">
- $(function () {
- var $de = $("#de");
- $de.toggle(function () { $(".de").fadeIn("slow"); }, function () { $(".de").fadeOut("slow"); });
- });
- </script>
- </head>
- <body>
- <a href="#" id="de">content</a>
- <div class="de"></div>
- </body>
- </html>
原文鏈接：http://www.cnblogs.com/xiangwenwen/archive/2012/05/15/2501941.html
【編輯推薦】
責(zé)任編輯：張偉
來源：
飛舞輕揚(yáng)在臺北的博客
