jquery动画1

最新推荐文章于 2022-12-13 13:43:21 发布

万剑

最新推荐文章于 2022-12-13 13:43:21 发布

阅读量440

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/qingchunweiliang/article/details/71709878

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
        $(function () {


            $('#but').click(function (event) {
//                对于hide、show、toggle、fadeIn、fadeOut、fadeToggle、fadeTo、slideDown、
//                slideUp、slideToggle，都可以指定持续时间，若指定时间同时可以添加结束回调，
//
//                对于同一个元素连续添加动画则会依次执行，不会同时执行。

//                可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
//                可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

//                $('.container').hide();
//                $('.container').hide(3000);
//                $('.container').show();
//                $('.container').show(3000);
//                $('.container').toggle( );
//                $('.container').toggle(3000);

//                var callback = function () {
//                    $('.container').toggle(1000,callback);
//                };
//                callback();

                //fadeIn要指定display:none 样式，否则无效
//                $('.container').css("display","none").fadeIn();
//                $('.container').css("display","none").fadeIn(3000);

                //fadeOut不能指定display:none 样式，
//                $('.container').fadeOut();
//                $('.container').fadeOut(3000);
//                $('.container').fadeToggle(1000);
//                $('.container').fadeTo(1000,0.5);


                //slideDown要指定display:none 样式，否则无效
//                $('.container').css("display","none").slideDown( );
//                $('.container').css("display","none").slideDown(2000);

                //slideUp不能指定display:none 样式，
//                $('.container').slideUp( );
//                $('.container').slideUp(2000);

                $('.container').slideToggle(2000);


            })

        });
    </script>
</head>
<body>
<button id="but">
    按钮
</button>

<div class="container">
    <img src="http://img3.redocn.com/tupian/20151016/mengchongxiaotuzi_5102602.jpg">
</div>
</body>

<style>

    .container {
        background-color: gray;
        width: 600px;
        height: 420px;
        display: flex;
        flex-direction: row;
    }

</style>
</html>