菜鸟教程
教程 jquery tutorial

基本动画

jQuery 提供了多种便捷的动画方法，用于控制元素的显示、隐藏、淡入淡出、滑动等效果，让页面更具交互性。

显示与隐藏

  • show() — 显示元素
js 
  $("#box").show();
  • hide() — 隐藏元素
js 
  $("#box").hide();
  • toggle() — 显示/隐藏切换
js 
  $("#box").toggle();

渐变动画

  • fadeIn() — 元素淡入
  • fadeOut() — 元素淡出
  • fadeToggle() — 淡入淡出切换
  • fadeTo() — 设置透明度渐变
js 
  $("#box").fadeTo(1000, 0.5); // 1秒内变为50%透明

滑动动画

  • slideDown() — 向下滑出元素
  • slideUp() — 向上滑入隐藏元素
  • slideToggle() — 滑动切换
js 
  $("#box").slideToggle(600);

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function () {
    $("#btnShow").click(function () {
      $("#box").fadeIn();
    });
    $("#btnHide").click(function () {
      $("#box").fadeOut();
    });
    $("#btnToggle").click(function () {
      $("#box").slideToggle();
    });
  });
</script>

<div
id="box"
style="
width: 200px;
height: 100px;
background: #4caf50;
display: none;
margin-bottom: 10px;
"
></div>


<button id="btnShow">淡入显示</button>
<button id="btnHide">淡出隐藏</button>
<button id="btnToggle">滑动切换</button>

相关内容