& lt！DOCTYPE html & gt
& lthtml & gt
& lthead & gt
& ltmeta charset = & # 8221utf-8 ″& gt
& lttitle & gt39- jQuery隐藏和显示动画
& ltstyle type = & # 8221text/CSS ”& gt
*{
边距:0；
填充:0；
}
部门{
宽度:200px
高度:200px
背景:红色；
边距-顶部:20px
显示:无；
}
& lt/style >
& lt脚本src = & # 8221../static/js/jquery-3 . 6 . 0 . js ”& gt& lt/script >
& lt脚本& gt
$(function(){
$(“巴顿”).等式(0)。单击(function(){ //单击第一个按钮后调用函数。
// $(“div & # 8221).CSS(“显示”, “block & # 8221)//找到div并把”以他的css风格展示”设置为”block & # 8221，也就是展示的意义
$(“div & # 8221).show(1000，function(){ //在1000毫秒即1秒内找到div并显示，然后执行函数。
//动画结束时调用
alert(‘动画完成’)//弹出窗口
})
})
$(“巴顿”).等式(1)。单击(function(){ //单击第二个按钮后调用函数。
// $(“div & # 8221).CSS(“显示”, “无”)//找到div并把”以他的css风格展示”设置为无，表示隐藏。
$(“div & # 8221).hide(2000，function(){ //找到div隐藏2000毫秒，也就是2秒，然后执行函数。
alert(‘动画是隐藏的’)//弹出窗口
})
})
$(“巴顿”).等式(2)。单击(function(){ //单击第三个按钮后调用函数。
$(“div & # 8221).toggle(3000，function(){ //找到div在3000毫秒，也就是3秒内切换隐藏/显示状态，然后执行函数。
alert(‘动画切换’)//弹出窗口
})
})
})
& lt/script >
& lt/head >
& ltbody & gt
& ltbutton & gt显示
& ltbutton & gt隐藏
& ltbutton & gt转换
& ltdiv & gt
& lt/div >
& lt/body >
& lt/html >
本文来自别舍不得旧情人投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/636477.html
微信扫一扫 
