Query 效果函数动画

来源：互联网发布：3tier数据编辑：程序博客网时间：2024/06/16 18:26
<!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>练习2jQuery 效果函数</title><script src="../jquery.min.js"></script><script>    $(function(){    //animate() 方法执行 CSS 属性集的自定义动画。    //点击按钮激活事件    //对被选元素应用“自定义”的动画        $("#th1").click(function(){            $("#pc").animate({                height:"+=300px",                   width:"+=300px" ,            },6000);        });        $("#th2").click(function(){            $("#pc").animate({                height:"-=300px",                   width:"-=300px"                 },1000);        });    //停止当前正在运行的动画clearQueue();：    $("#th3").click(function(){        $("#pc").clearQueue();    });    //使用淡入效果来显示一个隐藏的 元素fadeIn()：    $("#th5").click(function(){        $("#pc1").fadeIn();    });    //逐渐改变被选元素的不透明度，从可见到隐藏fadeOut()    $("#th4").click(function(){        $("#pc1").fadeOut();    });    //显示被选的元素    $("#th6").click(function(){        $("#pc1").show();      });    //隐藏元素hide()    $("#th7").click(function(){        $("#pc1").hide();    });    //显示隐藏效果    $("#th8").click(function(){        $("#pc2").toggle();    });    //  通过调整高度来滑动显示被选元素    //划入slideUp()      $("#th9").click(function(){        $("p").slideUp();    });    //划出slideDown()     $("#th10").click(function(){        $("p").slideDown();     });     //对被选元素进行滑动隐藏和滑动显示的切换     $("#th11").click(function(){        $("p").slideToggle();     });     //动画     $("#th12").click(function(){        $("#pc5").animate({            height:300,            width:300        },3000);     });     //     $("#th13").click(function(){        $("#pc5").stop();        $("#pc").stop();     });    });</script><style>    div{    width:100px;    height:100px;    background-color:#00CCCC;}</style></head><body>    <div id="pc" style="background:1px red scroll; height:100px; width:100px; position:relative;" >测试动画</div><br />    <div id="pc1" style="background:1px red scroll; height:100px; width:100px;" >测试透明度</div><br />    <p id="pc2">这是一段</p>    <div id="pc3"></div>    <div id="pc5"></div>    <input  type="button" value="动画移动按钮" id="th1"/>    <input  type="button" value="还原动画移动按钮" id="th2"/>    <input  type="button" value="停止动画移动按钮" id="th3"/>    <input  type="button" value="透明按钮" id="th4"/>    <input  type="button" value="显示按钮" id="th5"/>    <input  type="button" value="显示按钮" id="th6"/>    <input  type="button" value="隐藏按钮" id="th7"/>    <input  type="button" value="隐藏/显示按钮" id="th8"/>    <input  type="button" value="划入按钮" id="th9"/>    <input  type="button" value="滑出按钮" id="th10"/>    <input  type="button" value="划入划出按钮" id="th11"/>    <input  type="button" value="动画按钮" id="th12"/>    <input  type="button" value="停止动画按钮" id="th13"/></body></html>
阅读全文
0 0