动画暂停效果

原创 2018-11-18 21:46:07 221
摘要:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>动画</title>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        p{
            position: absolute;
        }
    </style>
</head>
<body>
<input id="da" type="button" value="放大镜">

<p>这是放大啊</p>

<input type="button" id="stop" value="暂停">

<script>
    $(document).ready(function () {
        $('#da').click(function () {
            $('p').animate({fontSize:'300px'},2000,function () {
                $('p').animate({
                    fontSize:'20px',
                    color:'red'
 },3000,function () {
                    $('p').animate({
                        left:'1000px'
 },2000,function () {
                        $('#da').click();
                    })
                })
            })

        })

        $('#stop').click(function () {
            $('p').stop();
        })




    })






</script>


</body>
</html>


批改老师:灭绝师太批改时间:2018-11-19 09:21:42
老师总结:你的作业一直比较简洁啊,有时候不熟悉的地方建议备注奥!

发布手记

热门词条