13-javascript-JQuery动画

JQuery 动画

1、元素的显示隐藏 show(0) hide() 同时改变宽和高

//第一个参数可以传一个时间 单位是毫秒值
//第二个参数是一个回调函数
$(".btn1").click(function(){
    $("div").show(1000，()=>{
        console.log("显示完毕，执行的回调函数")
    }
    console.log("显示")
})
$(".btn2").click(function(){
    $("div").hide(1000，()=>{
        console.log("隐藏完毕，执行的回调函数")
    })
    console.log("隐藏")
})

2、slideDown() slideUp() 改变元素的高度

//第一个参数可以传一个时间 单位是毫秒值
//第二个参数是一个回调函数
$(".btn1").click(function(){
    $("div").slideDown(500,()=>{
        console.log(123)
    })
    console.log("显示")
})
$(".btn2").click(function(){
    $("div").slideUp()
    console.log("隐藏")
})

3、fadeIn() fadeOut()

//第一个参数可以传一个时间 单位是毫秒值
//第二个参数是一个回调函数
$(".btn1").click(function(){
    $("div").fadeIn()
    console.log("显示")
})
$(".btn2").click(function(){
    $("div").fadeOut()
    console.log("隐藏")
})

4、toggle() 就是 show 和 hide 的组合

$(".btn3").click(function(){
    $("div").toggle(500,()=>{
        console.log(123)
    })
})

5、slideToggle() 就是 slideDown 和 slideUp 的组合

$(".btn3").click(function(){
    $("div").slideToggle(500,()=>{
        console.log(123)
    })
})

6、fadeToggle 就是 fadeIn 和 fadeOut 的组合

$(".btn3").click(function(){
    $("div").fadeToggle(500,()=>{
        console.log(123)
    })
})

自定义动画

animate() jQuery提供给我们的方法

//第一个参数  要执行的动画的那些属性  对象
//第二个参数  执行动画的时间
//第三个参数  动画执行完毕的回调函数
$("button").click(function(){
    $("div").animate({
        width:400,
        height:400,
        backgroundColor:"hotpink",
        borderRadius:"50%"
    },2000,()=>{
        console.log("动画完成")
    })
    .slideUo(500)
})

stop() 立即停止动画 停止在当时的那个状态

finish() 立即停止动画 停止在动画完成的那个状态

.end() 返回前一个元素