动画效果（Animation）

jQuery 提供了简单易用的动画 API，无需写复杂的 CSS transition 或 requestAnimationFrame。

基本动画

fadeIn / fadeOut / fadeToggle

// 渐显（淡入）
$('#box').fadeIn(1000)      // 1秒内渐显
$('#box').fadeIn('slow')    // 慢速（600ms）
$('#box').fadeIn('fast')    // 快速（200ms）
$('#box').fadeIn()          // 默认 400ms

// 渐隐（淡出）
$('#box').fadeOut(500)

// 切换
$('#box').fadeToggle()

slideDown / slideUp / slideToggle

// 向下滑动显示
$('#menu').slideDown(300)

// 向上滑动隐藏
$('#menu').slideUp(300)

// 切换
$('#menu').slideToggle('fast')

自定义动画：animate()

// 基本用法
$('#box').animate({
    left: '100px',          // 移动到 left: 100px
    top: '50px',
    opacity: 0.5,           // 透明度
    width: '200px',
    height: '100px'
}, 1000)  // 持续时间 1000ms

// 缓动函数（easing）
// 默认是 "swing"，也可以写 "linear"
$('#box').animate({
    left: '500px'
}, {
    duration: 2000,
    easing: 'linear',       // 线性匀速
    complete: function() {
        console.log('动画完成')
    }
})

动画队列

jQuery 的动画是队列执行的，多个动画会自动排队：

$('#box')
  .slideDown(500)
  .delay(200)          // 暂停 200ms
  .fadeOut(300)
  .queue(function(next) {
      console.log('这是一个回调')
      next()           // 必须调用 next() 继续下一个动画
  })

停止动画：

$('#box').stop(true, true)  // 第一个 true = 清空队列，第二个 true = 跳到当前动画末尾
$('#box').finish()          // 立即完成所有动画

常用示例

1. 加载动画

function showLoading() {
    $('#loading').fadeIn(200)
}

function hideLoading() {
    $('#loading').fadeOut(200)
}

2. 提示消息

function showToast(msg) {
    $('<div class="toast">' + msg + '</div>')
        .appendTo('body')
        .fadeIn(300)
        .delay(2000)
        .fadeOut(300, function() {
            $(this).remove()
        })
}

3. 下拉菜单

$('.menu-btn').click(function() {
    $('.dropdown-menu').slideToggle(200)
})

4. 轮播图（简化版）

var current = 0
var slides = $('.slide')
var total = slides.length

function showSlide(index) {
    slides.eq(current).fadeOut(300)
    slides.eq(index).fadeIn(300)
    current = index
}

$('.next-btn').click(function() {
    var next = (current + 1) % total
    showSlide(next)
})

5. 滚动到顶部

// 平滑滚动
$('html, body').animate({
    scrollTop: 0
}, 500)

// 滚动到指定元素
$('html, body').animate({
    scrollTop: $('#target').offset().top
}, 800)

性能考虑

避免同时大量动画：浏览器每帧 60fps，太多动画会卡
用 transform 代替 left/top：transform 不会触发重排（reflow），性能更好
动画结束后清理：及时 remove() 隐藏的元素，避免 DOM 堆积

// 不推荐：left/top 会触发布局重排
$('#box').animate({ left: '100px' }, 500)

// 推荐：用 transform（jQuery 3.x+ 支持）
$('#box').animate({ 
    'transform': 'translateX(100px)' 
}, 500)

// 或者用 CSS transition + 添加 class
$('#box').addClass('slide-in')  // CSS 里定义 transition

示例：带动画的 Tab 切换

<div class="tabs">
  <button data-tab="1">Tab 1</button>
  <button data-tab="2">Tab 2</button>
</div>
<div class="tab-content">
  <div class="panel" id="panel-1">内容 1</div>
  <div class="panel" id="panel-2">内容 2</div>
</div>

$('.tabs button').click(function() {
    var target = $(this).data('tab')
    
    // 隐藏当前
    $('.panel:visible').fadeOut(200)
    
    // 显示目标
    $('#panel-' + target).delay(200).fadeIn(300)
})

下一站

动画让页面更生动，但真实项目中我们更多要和服务端交互——AJAX 让你无需刷新页面就能获取数据。