jQuery 动画

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jQuery 动画，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

动画

$('button').click(function () {
    //               显示
    $('.Box').stop().show(2000,function(){ 回调函数 })
    $('.Box').stop().hide(2000)  // 隐藏
    
    //使用动画效果 一定先stop()停止动画 再开动画
    
    $('.Box').stop().toggle(500);  // 显示隐藏一起设置  500 为时间
    //卷帘门效果  下开
    $('.Box').slideDown(300);
    // 卷帘门  上关
    $('.Box').slideUp(1000);
    // 卷帘门 一起设置
    $('.Box').slideToggle(1000);
    
    // 淡出
    $('.Box').fadeIn(1000);
    // 淡入
    $('.Box').fadeOut(1000);
    // 淡出淡入
    $('.Box').fadeToggle(1000);
})

显示隐藏动画

show();
hide(3000,fn);
toggle(3000,fn)

卷帘门效果

slideDown(); //显示
slideUp();//隐藏
slideToggle() //开关式的显示隐藏

淡入淡出效果

fadeIn();//显示
fadeOut();//隐藏
fadeToggle()//开关式的显示隐藏

额外内容

click
css(); //样式属性操作  oDiv.style.xxx
text(); //innerText
html(); //innerHtml
val();        //value

addClass();
removeClass()

jQuery的自定义动画

$(SELEctor).animate({Css的属性},speed,fn)

要想修改背景颜色,那么要借助与jquery的插件 https://github.com/jquery/jquery-color/blob/master/jquery.color.js

$("button").click(function () {
    let json = {"width": 500,"height": 500,"left": 300,"top": 300,"border-radius": 100};
    let json2 = {
        "width": 100,"height": 100,"left": 100,"top": 100,"border-radius": 100,"BACkground-color": "red"
    };
    //自定义动 画
    $("div").animate(json,1000,function () {
        $("div").animate(json2,function () {
            alert("动画执行完毕！");
        });
    });

})

停止动画

使用动画的时候一定要先stop() 再开启动画,使用定时器的时候要先清定时器,再开定时器

//入口函数
$(document).ready(function () {
    //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
    var jqli = $(".wrap>ul>li");

    //绑定事件
    jqli.mouseenter(function () {
        $(this).children("ul").stop().slideDown(1000);
    });

    //绑定事件(移开隐藏)
    jqli.mouSELEave(function () {
        $(this).children("ul").stop().slideUp(1000);
    });
});