jquery 效果

jQuery 提供了丰富的效果方法，用于实现动画、过渡和交互效果。以下是常用的 jQuery 效果分类及示例：

基础显示与隐藏效果

hide()、show() 和 toggle() 方法用于控制元素的显示状态。

• hide() 隐藏匹配的元素。

  $("#element").hide();

• show() 显示匹配的元素。

  $("#element").show();

• toggle() 切换元素的显示状态。

  $("#element").toggle();

淡入淡出效果

fadeIn()、fadeOut() 和 fadeToggle() 方法通过调整透明度实现淡入淡出效果。

• fadeIn() 淡入显示元素。

  $("#element").fadeIn();

• fadeOut() 淡出隐藏元素。

  $("#element").fadeOut();

• fadeToggle() 切换淡入淡出状态。

  $("#element").fadeToggle();

滑动效果

slideDown()、slideUp() 和 slideToggle() 方法通过调整高度实现滑动效果。

• slideDown() 向下滑动显示元素。

  $("#element").slideDown();

• slideUp() 向上滑动隐藏元素。

  $("#element").slideUp();

• slideToggle() 切换滑动状态。

  $("#element").slideToggle();

自定义动画

animate() 方法允许创建自定义动画。

• 通过 CSS 属性变化实现动画。

  $("#element").animate({
    opacity: 0.5,
    left: "50px",
    height: "200px"
  }, 1000);

动画队列控制

stop() 和 delay() 方法用于控制动画队列。

• stop() 停止当前动画。

  $("#element").stop();

• delay() 延迟后续动画的执行。

  $("#element").delay(1000).fadeOut();

回调函数

动画方法支持回调函数，在动画完成后执行。

• 在 fadeOut() 完成后执行函数。

  $("#element").fadeOut(500, function() {
    alert("Animation complete.");
  });

这些方法可以通过链式调用组合使用，实现复杂的动画效果。