纸上得来终觉浅，绝知此事要躬行。

 

jquery淡入淡出效果 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery/jquery-1.4.4.min.js"></script>
</head>

<body>
<script type="text/javascript">
$(document).ready(function()
{
    $("#clickme").click(function()
    {
        $("#hish").slideToggle("slow")
    })
})
$(document).ready(function()
{
    $("#reclick").click(function()
    {
        $("#hish").toggle("slow")//还有另外的模式   fast   normal或毫秒
    })
})
$(document).ready(function()
{
    $("#re").click(function()
    {
        $("#hish").slideDown("slow")
    })
})
$(document).ready(function()
{
    $("#reme").click(function()
    {
        $("#hish").slideUp("slow")
    })
})
</script>
<div style="width:450px; height:160px; display:block">
    <div id="hish" style="border:1px solid #666; width:400px;"><p>In the text box below to edit your code, and then click the button test results</p><br /><p>In the text box below to edit your code, and then click the button test results</p>
    </div>
</div>
<div id="clickme" style="cursor:pointer; width:450px; text-align:center;">hide/show/.slideToggle("slow")---还有另外的模式   fast   normal或毫秒</div><br />
<div id="reclick" style="cursor:pointer; width:450px; text-align:center;">hide/show/.toggle("slow")---还有另外的模式   fast   normal或毫秒</div><br />
<div id="re" style="cursor:pointer; width:450px; text-align:center;">hide/show/.slideDown("slow")---还有另外的模式   fast   normal或毫秒</div><br />
<div id="reme" style="cursor:pointer; width:450px; text-align:center;">hide/show/.slideUp("slow")---还有另外的模式   fast   normal或毫秒</div><br />


<script type="text/javascript">
$(document).ready(function()
{
    $("#xxx").click(function()
    {
        $("#dan").fadeTo("slow",0.5)
    })
})

$(document).ready(function()
{
    $("#hhh").click(function()
    {
        $("#dan").fadeOut("slow")
    })
})
$(document).ready(function()
{
    $("#uuu").click(function()
    {
        $("#dan").fadeIn("slow")
    })
})
</script>
<input type="button" id="xxx" value="指定" />
<input type="button" id="hhh" value="消失" />
<input type="button" id="uuu" value="出现" />
<div id="dan" style="background:#f00; cursor:pointer;">In the text box below to edit your code, and then click the button test results</div>
</body>
</html>

总结如下图：

 

以上的参数可以是"slow"、"fast"、"normal"或毫秒

例如

$(".test").slideToggle(1000)

即表示1秒的时间

posted on 2010-11-19 16:16  JRoger  阅读(320)  评论(0)  编辑  收藏  举报

导航