jQuery 动画效果

一、基本动画效果

是指元素的隐藏和显示
1、隐藏匹配元素

使用hide()方法可以隐藏匹配元素，相当于把CSS样式属性display的值设置为none，它的语法格式如下：

hide(speed,[callback])

其中，speed是指定动画的时长，可以是数字（单位：毫秒ms），也可以是默认参数（slow(600ms)、normal(400ms)、fast(200ms)）！使用默认参数时候需要加引号“”，而使用数字则不需要加引号！；另一个参数也是可选参数，用于指定隐藏完成之后要触发的回调函数，如果被选择到的元素有n个则回调函数执行n次

比如，要用正常的速度隐藏页面上的id为demo的元素：

$("#demo").hide("normal");

2、显示匹配元素

使用show()方法显示匹配的元素，它的语法和上述方法一模一样：

show(speed,[callback]);

两个参数也和上面的一模一样，例如，要用慢慢的速度展示页面上id为demo的元素

$("#demo").show("slow");

3、自动切换显示或隐藏状态

使用toggle()方法来实现自动切换，如果元素隐藏，则显示该元素；否则隐藏。他的语法格式如下：

toggle(speed,[callback]);

二.淡入、淡出动画效果

淡入淡出效果如下图所示：

共有如下四种方法:

• fadeIn(speed,[callback])：增大不透明度实现元素淡入

• fadeOut(speed,[callback])：减小不透明度实现元素淡出

• fadeTo(speed,opacity,[callback])：不透明度以渐进的方式调整到指定参数，opacity参数只能是0到1之间的数字，数值越大透明度越低

• fadeToggle(speed,[callback])：如果元素已淡出则淡入，否则淡出

例子：使用fadeTo实现图片颜色变淡

效果如下：
步骤1：编写HTML代码，并为每个

赋一个id

步骤2：引入jQuery库，然后编写jQuery代码：

$(document).ready(function () {
    $("input[type='button']").click(function () {
        $("#div1").fadeTo("slow",0.25);
        $("#div2").fadeTo("slow",0.5);
        $("#div3").fadeTo("slow",0.75);
    });
});

• 点赞
• 收藏
• 分享
• • 文章举报

A-Select � 发布了44 篇原创文章 · 获赞 2 · 访问量 355 私信 关注

标签：jQuery,动画,slow,效果,元素,fadeTo,callback,speed,隐藏
来源： https://blog.csdn.net/weixin_45959504/article/details/104088339