Jquery工做經常使用實例——淡入淡出功能實現

時間 2019-11-09

原文原文鏈接

首先說下幾個事件的用法：javascript

1：$(selector).fadeOut(speed,callback))：淡出被選元素；html

2：$(selector).fadeIn(speed,callback)：淡入被選元素；java

3：$(selector).fadeTo(speed,opacity(亮度),callback))：把被選元素淡出爲給定的不透明度jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">ui

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#test").click(function(){
            $(this).fadeOut("slow",function(){
                $(this).fadeIn("slow");
            });
        })
    })
</script>
<title>Jquery fadeOut</title>
</head>

<body>
<div id="test" style="background:#26EA7E;width:200px;">點擊我，顏色淡出後再淡入</div>
</body>

</html>this

如上，單擊「點擊我，顏色淡出後再淡入」，那麼id 爲"test"的div中的內容將淡出再淡入；xml

固然若是要用fadeTo的話也能實現上面的效果，只需將Jquery中的代碼改成以下便可：htm

    $(document).ready(function(){
        $("#test").click(function(){
            $(this).fadeTo("slow",0.1,function(){
                $(this).fadeTo("slow",1);
            });
        })
    })事件

是否是很簡單啊？是的，的確簡單，但實際應用，就要看你們的發揮了，不怕作不到，就怕想不到，多練纔是真理。ip

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。