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
文章标题:jQuery显示隐藏动画效果
本文作者:XIAOK Z
发布时间:2019-09-02, 15:56:57
最后更新:2019-09-02, 16:15:55
原始链接:http://yoursite.com/2019/09/02/jQuery显示隐藏动画效果/版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。