Jquery—效果（隐藏、显示、切换，滑动，淡入淡出及动画）

最新推荐文章于 2022-06-14 23:08:40 发布

原创最新推荐文章于 2022-06-14 23:08:40 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery #动画 #淡入淡出 #隐藏显示

Jquery 同时被 2 个专栏收录

8 篇文章

订阅专栏

Jquery学习之路

8 篇文章

订阅专栏

本文详细介绍了jQuery中的动画效果，包括隐藏和显示元素、淡入淡出效果、滑动操作以及如何停止动画。提供了fadeIn(), fadeOut(), fadeToggle(), slideDown(), slideUp(), slideToggle()等方法的用法，并举例说明了如何在点击事件中实现元素的动画效果。" 51741043,5669197,Mac OS上使用Sublime Text 3搭建Golang开发环境,"['Golang', '前端开发', 'Sublime Text', '编辑器配置']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.隐藏和显示

语法：

$(selector).hide(speed,callback); 隐藏

$(selector).show(speed,callback);显示

$(selector).toggle(speed,callback);隐藏显示进行切换

其中，

speed是隐藏显示的速度，可取："slow"、"fast" 或毫秒。

callback是隐藏显示动作完成之后执行的函数。

使用：

$("button").click(function(){
  $("p").hide(1000);
});

2.淡入淡出

四种 fade 方法：

fadeIn()：$(selector).fadeIn(speed,callback); 淡入已隐藏的元素
fadeOut()：$(selector).fadeOut(speed,callback); 淡出可见元素
fadeToggle()：$(selector).fadeToggle(speed,callback); 在 fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo()：$(selector).fadeTo(speed,opacity,callback); 渐变为给定的不透明度（值介于 0 与 1 之间）
其中，
speed：效果的时长，可选（fadeto中必须有这个参数），可取以下值："slow"、"fast" 或毫秒。.

callback ： fading 完成后所执行的函数名称，可选。
用法：

$(function(){
            $("#btn").click(function(){
                $("#box4").fadeToggle(1000);
            });
        });

3.滑动

滑动方法：

slideDown()：$(selector).slideDown(speed,callback); 向下滑动已隐藏元素
slideUp()：$(selector).slideUp(speed,callback); 向上滑动已显示元素
slideToggle()：$(selector).slideToggle(speed,callback);在 slideDown() 与 slideUp() 方法之间进行切换

用法：

$(function(){
        $("#btn").click(function(){
            $("#box4").slideToggle();
        });
    });

4.动画

animate()：$(selector).animate({params},speed,callback);

{params}：必选，动画的 CSS 属性；

speed：可选，动画执行的速度；

callback：可选，动画百分之百执行完成之后指定的函数。

用法：

 $(function(){
        $("#btn").click(function(){
            $("#box4").animate({
                marginLeft:"100px"
            });
        });
    });

此外，{params}中还可以操作多个值去改变多个css属性。

$("#box4").animate({
                marginLeft:"100px",
                height:"200px",
                width:"200px"
            });

使用相对值，让每执行一次动画，在原来的基础上相对增量。

$("#box4").animate({
                marginLeft:"+=10px",
                height:"+=10px",
                width:"+=10px"
            });

使用预定值，将css动画属性设置为show,hide或者toggle.

 $("#box4").animate({
               height:"toggle",
            });

还可以使用队列功能，如下：

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

每次点击按钮，动画将从上往下逐个执行。

5.停止动画
stop()：$(selector).stop(stopAll,goToEnd);适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

stopAll ：可选，是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

goToEnd ：可选，是否立即完成当前动画。默认是 false。

默认地，stop() 会清除在被选元素上指定的当前动画。

用法：

 $("#stop").click(function(){
            $("#box4").stop();
        });

本文参考资料来自：http://www.runoob.com/jquery/jquery-chaining.html