新浦京娱乐场官网滑动和animate以致怎么样停止动漫,滑动animate动漫

滑动和animate以及如何停止动画,滑动animate动画

  又是一天过去了,今天复习了slideDown、slideUp、slideToggle以及animate和stop的用法。

  

<!DOCTYPE html>
<html>
<head>
    <title>滑动和动画</title>
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript">
        // slideDown(speed,callback);用于向下滑动元素。
        // $(function(){
        //     $('#flip').click(function(){
        //         $('#panel').slideDown(2000);
        //     })
        // })
        // slideUp(speed,callback);用于向上滑动元素;
        // $(function(){
        //     $('#flip').click(function(){
        //         $('#panel').slideUp();
        //     })
        // })
        // slideToggle(speed,callback);切换元素可见状态。
        // $().ready(function(){
        //     $('#flip').click(function(){
        //         $('#panel').slideToggle(3000);
        //     })
        // })



        // animate({params},speed,callback)
        // 必需的params参数定义形成动画的CSS属性
        // 接下来我们吧div元素向右移动300px
        // 默认情况下所有的HTML元素有一个静态的位置,且是不可移动的,
        // 如果需要改变,我们需要将元素的positin属性设置为relative,fixed和
        // absolute.
        // $(function(){
        //     $('button').click(function(){
        //         $('div').animate({left:'300px'},4000);
        //     })
        // })
        // 我们可以继续使用animate()来操作多个属性
        // animate()几乎可以操作所有的css属性,必需使用camel(峰驼法)格式书写类似于paddingLeft相关的属性。
        // 同时,色彩颜色并不包含在核心JQuery库中,如果需要生成颜色动画,需
        // 要下载颜色动画插件
        // $(document).ready(function(){
        //     $('button').click(function(){
        //         $('div').animate({
        //             left:'300',
        //             opacity:'0.2',
        //             width:'100',
        //             height:'400'
        //         });
        //     });
        // });

        // animate({params},speed.callback);也可以定义相对值(该值
        // 相对于元素的当前值),需要在值的前面就加上
        // +=或-=
        // $(function(){
        //     $('button').click(function(){
        //         $('div').animate({
        //             left:'20px',
        //             width:'+=20',
        //             height:'+=20'
        //         })
        //     })
        // })

        // animate()使用预定义的值
        // 比如下面的例子高度可以设置成'show','hide','toggle'.
        // $(function(){
        //     $('button').click(function(){
        //         $('div').animate({
        //             height:'toggle'
        //         });
        //     });
        // });

        // 默认情况下,JQuery提供针对动画队列功能
        // 意味这你在彼此编写多个anmiate()调用,JQuery会
        // 创建包含这些方法调用的‘内部’队列,然后逐一运行这些animate调用

        // 例子1
        // $(document).ready(function(){
        //     $('button').click(function(){
        //         var div=$('div');
        //         div.animate({top:'400',opacity:'0.5'});
        //         div.animate({left:'400',opacity:'0.2'});
        //         div.animate({top:'40',opacity:'0.5'});
        //         div.animate({left:'40',opacity:'1'});
        //     });
        // })
        // 例子二:先把div移动,然后放大中间字体
        $().ready(function(){
            $('button').click(function(){
                $('div').animate({
                    top:'50',
                    left:'100',
                    width:'500',
                    height:'300',
                    opacity:'0.3'
                },3000);
                $('div').animate({
                    fontSize:'100'
                },5000);
            });
        })
    </script>
    <style type="text/css">
        #flip,#panel{
            padding: 5px;
            text-align:center;
            background-color: yellow;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <!-- <div id="flip">点我滑动</div>
    <div id="panel">-->
    <button>开始动画</button>
    <div style="position: absolute;width: 200px;height: 200px;background-color: red;">这就是爱爱爱爱!!</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>stop()方法</title>
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#flip').click(function(){
                $('#panel').animate({
                    height:'show'
                },2000);
                $('#panel').animate({
                    fontSize:'30'
                },2000);

            })
        });
        $(function(){
            $('#stop').click(function(){
                $('#panel').stop(false,false);
            })
        });
        // stop(),用于停止动画效果,在它们完成之前
        // stop()方法适用于所有JQuery效果函数,包括滑动,淡入淡出和自定义动画
        // stop(stopAll,goToEnd)
        // stopAll参数规定是否立即清除当前动画,默认是false
        // 即仅停止活动的动画,准许任何排入队列的动画向后执行
        // (改为true,则该函数所有动画暂停,不管是true还是false,第一个动画已经暂停,控制的是后面队列的函数)
        // goToEnd参数规定是否立即完成当前动画,默认false
    </script>
    <style type="text/css">
        div{
            padding: 5px;
            text-align:center;
            background-color: gray;
            border: 1px solid black;
        }
        #panel{
            padding: 50px;
        }
    </style>
</head>
<body>
    <button id="stop">停止滑动</button>
    <div id="flip">点我向下滑动面板</div>
    <div id="panel" style="display: none;">Hellow World!</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>案例</title>
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript">
        // slideDown用法
        // $(function(){
        //     $('#flip').click(function(){
        //         $('#panel').slideDown('slow',function(){
        //             $('#panel').css('opacity','0.3');
        //         });                
        //     })
        // })
        // slideUp用法
        // $(function(){
        //     $('#flip').click(function(){
        //         $('#panel').slideUp('slow');
        //     })
        // })

        // slideToggle用法
        // $(function(){
        //     $('#flip').click(function(){
        //         $('#panel').slideToggle('slow');
        //     })
        // })

        // 停止动画中stop用法

        $(function(){
            $('#start').click(function(){
                $('div').animate({
                    left:'100px'
                },4000);
                $('div').animate({fontSize:'60px'},4000);
            })

            $('#stop').click(function(){
                $('div').stop();
            })
            $('#stop2').click(function(){
                $('div').stop(true);
            })
            $('#stop3').click(function(){
                $('div').stop(true,true);
            })
        })
    </script>
    <style type="text/css">
        div{
            padding: 5px;
            text-align: center;
            background-color: blue;
            border: 1px solid black;
        }
        #panel{
            padding: 50px;
        }
    </style>
</head>
<body>

    <!-- <div id="flip">点我</div>
    <div id="panel">-->

    <button id="start">开始</button>
    <button id="stop">停止</button>
    <button id="stop2">停止所有</button>
    <button id="stop3">停止动画,但完成动作</button>
    <div style="position: absolute;width: 200px;height: 100px;background-color: red;">World!</div>
</body>
</html>

 

新浦京娱乐场官网, 又是一天过去了,今天复习了slideDown、slideUp、slideToggle以及animate和stop的用法。 ! DOCTYPE ht...

本文由新浦京娱乐站_新浦京娱乐场官网_新浦京娱乐发布于技术创新,转载请注明出处:新浦京娱乐场官网滑动和animate以致怎么样停止动漫,滑动animate动漫

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。