jQuery动画相关知识学习

梦里梦外; 2022-06-08 14:16 159阅读 0赞

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>jQuery中的事件和动画</title>
        <meta charset="UTF-8"/>
    </head>
    <body>
    <script type="text/javascript">
        $(window).load(function () {
            //code
        })
    
        window.onload = function () {
            //code
        }
        $(function () {
            $("head").bind("click",function () {
                if($(this).next().is(":visible")){
                    $(this).next().hide();
                }else {
                    $(this).next().show();
                }
            })
        })
        //简写绑定事件
        $(function () {
            $("head").mouseover(function () {
                $(this).next().show();
            }).mouseout(function () {
                $(this).next().hide();
            })
        })
        //使得元素在3秒内右移500像素
        $(function () {
           $("#panel").click(function () {
               $(this).animate({left:"500px"},3000);
           });
        });
        //累加累减动画
        $(function () {
            $("#panel").click(function () {
                $(this).animate({left:"+=500px"},3000);
            });
        });
        //判断元素是否处于动画状态
        if(!$(element).is(":animated")){//判断元素是否正处于动画状态
            //如果当前没有进行动画，则添加新的动画
        }
        </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzQzMjU_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzQzMjU_size_16_color_FFFFFF_t_70]: /images/20220608/33882c7e57d547f9b96404787d0362f6.png