jQuery兩個有意思的切換方法

作者：飛舞輕揚在臺北 2012-05-22 10:12:59

話說，JQuery中toggle這是一個好玩意，用于綁定多個事件處理器函數(shù)，以響應被選元素的輪流click事件。如果元素是可見的，切換為隱藏。如果元素是隱藏的，切換為可見。

hover:

hover是一個自定義方法，描述的是，狀態(tài)一，狀態(tài)二，鼠標滑動而觸發(fā)。效果與onmousemove onmouseout類似。對于這種狀態(tài)，用一個小例子來描述，其實，在復雜的動畫富web應用中，hover的作用很廣泛。在function(){},function(){}這兩個回調(diào)函數(shù)中，足以讓我們發(fā)揮豐富的擴展。

.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:

.toggle(function(){},function(){},....);.toggle(speed,function(){}); .toggle(speed,easing,function(){});

speed：顯示與隱藏的速度，默認是0。

easing：指定切換效果，默認是swing，可選linear。

.toggle()方法還有一種以switch參數(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

【編輯推薦】

jQuery插件之Ajax自動完成
jQuery基本事件代碼優(yōu)化
印象深刻的jQuery手風琴效果應用
jQuery可多次使用的***插件
JQuery插件的開發(fā)真的有那么難嗎

責任編輯：張偉來源：飛舞輕揚在臺北的博客

jQuery