jQuery 动画

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_34232617

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json 前端 ViewUI

原文链接：http://www.cnblogs.com/zhang-zi-yi/p/10800448.html

博客主要介绍前端动画相关内容，包括显示隐藏动画、卷帘门效果、淡入淡出效果等，还提及 jQuery 自定义动画及停止动画的注意事项。此外，列举了前端常用的库，如 animate.css、font - awesome 等，并给出相关链接。

动画

$('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, 1000, 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);
    });
});