jquery动画1

来源：互联网发布：淘宝中国质造怎么加入编辑：程序博客网时间：2024/06/01 23:34
<!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>
0 0