JQuery-JavaScript代码库-动画篇—我耀学IT

最新推荐文章于 2025-03-25 23:56:14 发布

我耀学IT

最新推荐文章于 2025-03-25 23:56:14 发布

阅读量1.1k

点赞数 25

分类专栏： Jquery 文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/2301_78414876/article/details/136203976

版权

本文详细介绍了如何使用jQuery实现元素的隐藏与显示、toggle切换、淡入淡出、滑动动画以及自定义动画。此外，还涵盖了stop方法停止动画和使用callback函数的应用。

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

3.1 JQuery效果

3.1.1 隐藏与显示

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

实例:

jQuery hide() 隐藏方法

jQuery show() 显示方法

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("#hide").click(function(){
    $("p").hide(); 
}); 
$("#show").click(function(){ 
    $("p").show(); 
});

示例代码:

<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
  });
    $("#show").click(function(){
         $("p").show();
  });
});
</script>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>

语法：

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

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

实例：

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

下面的例子演示了带有 speed 参数的 hide() 方法，并使用回调函数：

$(document).ready(function(){ 
    $(".hidebtn").click(function(){ 
    $("div").hide(1000,"linear",function(){ 
        alert("Hide() 方法已完成!"); 
        }); 
    }); 
});

第二个参数是一个字符串，表示过渡使用哪种缓动函数。（注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。

3.1.2 JQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素:

实例:

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

语法:

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

3.2 淡入淡出

3.2.1 JQuery Fading 方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

fadeIn()     淡入已隐藏的元素
fadeOut()    淡出可见元素
fadeToggle() 在 fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo()     允许渐变为给定的不透明度（值介于 0 与 1 之间）

3.2.2 JQuery FadeIn 方法

语法：

$(selector).fadeIn(speed,callback);

可选的 sp

最低0.47元/天解锁文章