jQuery实现移动和渐变特效的点击事件

2019/6/29 22:29:51

编程Tag： jQuery 移动点击事件渐变

本文主要是介绍jQuery实现移动和渐变特效的点击事件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

先看代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/jquery.js"></script>

    </head>

<style>

body{font-family: "微软雅黑";width: 980px; margin: 0 auto; text-align: center;}

    .box{

        width: 300px;

        height: 300px;

        background: green;

        border: 1px solid #e6e6e6;

        margintop: 50px;

        line-height: 200px;

        position: absolute;

    }

button{

    border: none;

    background: green;    

    width: 100px;

    height: 50px;

    line-height: 50px;

    color: #fff;

    font-size: 16px;

    margin-top: 50px;

    }

</style>

    <body>

        <button>点击开始动画</button>

        <div class="box" ></div>

        <script> 

            $(document).ready(function(){

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

                var div=$(".box");

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

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

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

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

                div.animate({right:'100px',opacity:'0.8'},"slow");

                div.animate({bottom:'100px',opacity:'0.8'},"slow");

                div.animate({left:'100px',opacity:'0.8'},"slow");

                div.animate({top:'100px',opacity:'0.8'},"slow");

              });

            });

        </script> 

        <script>

            $(document).ready(function(){

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

                    var div=$(".box");

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

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

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

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

                    });

                });

            });

        </script>

    </body>

</html>

.animate 事件，是这个里面的新的东西。解释起来就是使div 块儿变得有灵魂可以移动。

Tips：

1、click 事件的点击节点的选择

2、通过 var div=$(".box") 来选择需要控制的 css 属性

剩下的就要靠自己去敲代码，看效果去理解其中的意思。

这篇关于jQuery实现移动和渐变特效的点击事件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQuery实现移动 和 渐变特效的点击事件

相关编程文章

jQuery实现移动和渐变特效的点击事件