您的位置：首页 > Web前端 > JQuery

jquery动画显示效果

2016-07-18 19:52 453 查看

1.布局设置

<body>

    <button >动画演示</button>

    <div style="width:86px; height:68px; background-color:pink;position:absolute; top: 80px; left: 7px;"></div>

</body>

2.函数设置：单击button按钮进行动画显示效果

<script src="Script/jquery-1.7.1.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("button").click(function () {

                $("div").animate({left:'250px'});

            });

        });

    </script>

3.全部html如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="Script/jquery-1.7.1.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("button").click(function () {

                $("div").animate({left:'250px'});

            });

        });

    </script>

</head>

<body>

    <button >动画演示</button>

    <div style="width:86px; height:68px; background-color:pink;position:absolute; top: 80px; left: 7px;"></div>

</body>

</html>

附加其他几种效果：看注释

<script type="text/javascript">

        $(document).ready(function () {

            $("button").click(function () {

                // $("div").animate({left:'250px'}); //划到距离左侧250px

                //$("div").animate({ height: 'toggle' })//上下高度滑动

                //$("div").animate({ width: 'toggle' }); //左右宽度滑动

                var div = $("div");

                div.animate({ width: '400px', opacity: '0.4' }, "slow");

                div.animate({ height: '300px', opacity: '0.9' }, "slow");

                div.animate({ width: '300px', opacity: '0.7' }, "slow");

                div.animate({ height: '233px', opacity: '0.2' }, "fast");

            });

        });

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航