Query 效果函数动画

最新推荐文章于 2022-08-13 17:33:37 发布

qq_39491653

最新推荐文章于 2022-08-13 17:33:37 发布

阅读量345

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_39491653/article/details/78430268

版权

js 专栏收录该内容

3 篇文章

订阅专栏

<!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>