jQuery显示隐藏动画效果

前端编程 javascript

创建时间:2019-09-02 15:56

阅读:

jQuery的显示和隐藏动画效果，直接上代码
添加事件

jQuery的显示和隐藏动画效果，直接上代码

首先我们需要在head里面导入jquey

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

加上现在body里面有一个div的标签，id为box，另外还有3个按钮，id分别为bt1,bt2,bt3，代码展示：

<body>
    <div id="box"><div>
    <button id="bt1">隐藏</button>
    <button id="bt2">出现</button>
    <button id="bt3">自动转换</button>
</body>

当然了，我们还需要给div设置一下样式，不然页面是显示不出来的，样式直接在head里面写。

<head>
    <style tyle="text/css">
        *{
            padding:0;
            margin:0;
        }
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

现在我们的样式就写好了，可以打开页面看一下效果，当然了，点击按钮是没有任何反应的，因为我们还没有给按钮添加任何的事件。

添加事件

在body里面写上如下代码：

<script type="text/javascript">
    $div = $("#box")
//获取到id为Box的元素
    $("#bt1").click(function){
        $div.hove(1000,function(){
                alert('1秒之后隐藏')        
        })
    }
    $("#bt2").click(function){
        $div.show(1000,function(){
                alert('1秒之后出现')        
        })
    }
    $("#bt3").click(function){
        $div.toggle(1000,function(){
                alert('隐藏时点击出现，反之亦然')        
        })
    }
</script>

以上代码中的hove函数是隐藏的意思，其中的参数第一个是消失的时间，就是在1秒之后会完全消失，show跟他相反，他是出现的意思，参数完全一样，后面还可以追加函数，这个函数会当我们前面的时间结束之后才执行。而toggle则融合了这两个方法，当元素是隐藏时，点击可以出现，当元素是出现的状态，点击会自动隐藏。

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1990858822@qq.com