jquery 动画

<!DOCTYPE html>


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script src="jquery-1.7.1.min.js"></script>
    <title></title>
    <script>
        $(function () {
            $('#btnShow').click(function () {
                $('#dv').show(1000);
            });


            $('#btnHide').click(function () {
                $('#dv').hide(1000);
            });




            $('#btnSlideDown').click(function () {
                $('#dv').slideDown(1000);
            });


            $('#btnSlideUp').click(function () {
                $('#dv').slideUp(1000);
            });


            $('#btnSlideToggle').click(function () {
                $('#dv').slideToggle(1000);
            });


            $('#btnFadeIn').click(function () {
                $('#dv').fadeIn(1000);
            });


            $('#btnFadeOut').click(function () {
                $('#dv').fadeOut(1000);
            });


            $('#btnFadeToggle').click(function () {
                $('#dv').fadeToggle(1000);
            });


            $('#btnFadeTo').click(function () {
                $('#dv').fadeTo(1000,0.2);
            });


            $('#btnAnimate').click(function () {
                $('#dv').animate({'width':'50px','height':'50px'},1000);
            });


            $('#btnAnimateLink').click(function () {
                $('#dv').animate({ 'width': '50px'}, 1000).animate({'height': '50px'},3000);
            });


            $('#btnStopAnimate').click(function () {//停止当前动画
                $('#dv').stop();
            });


            $('#btnStopAnimateAll').click(function () {//停止所有动画
                $('#dv').stop(true);
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="Show" id="btnShow" />
    <input type="button" name="name" value="Hide" id="btnHide" />


    <input type="button" name="name" value="SlideDown" id="btnSlideDown" />
     <input type="button" name="name" value="SlideUp" id="btnSlideUp" />
     <input type="button" name="name" value="SlideToggle" id="btnSlideToggle" />


     <input type="button" name="name" value="FadeIn" id="btnFadeIn" />
     <input type="button" name="name" value="FadeOut" id="btnFadeOut" />
     <input type="button" name="name" value="FadeToggle" id="btnFadeToggle" />
    <input type="button" name="name" value="FadeTo" id="btnFadeTo" />


    <input type="button" name="name" value="Animate" id="btnAnimate" />
    <input type="button" name="name" value="AnimateLink" id="btnAnimateLink" />
    <input type="button" name="name" value="StopAnimate" id="btnStopAnimate" />
     <input type="button" name="name" value="StopAnimateAll" id="btnStopAnimateAll" />




    <div id="dv" style="width:100px;height:100px;background-color:yellow">


    </div>
</body>
</html>
posted @ 2018-05-12 09:29  dxm809  阅读(75)  评论(0)  编辑  收藏  举报