jQuery 动画、遍历与工具方法

第 5 章 · jQuery 动画、遍历与工具方法

本章目标：掌握 show / hide / fade / slide / animate 动画 API；熟练使用 each / map / grep / extend 等遍历与对象工具；理解 jQuery 内置数组与对象工具；在 admin-demo 中实现侧栏折叠、表格行高亮与数据转换。

学时建议：4 小时（含 1 小时跟练）

前置：jquery-layui ch01～ch04。

5.1 显示与隐藏：show、hide、toggle

$('#panel-products').hide();                    // display: none
$('#panel-products').show(300);                 // 300ms 渐显
$('#panel-products').toggle(200);               // 切换

// 带 easing 与回调（jQuery 默认 'swing'）
$('#export-tip').show(400, 'linear', function () {
  $(this).text('导出完成');
});

注意：show/hide 会记住元素原 display 值（如 flex、table-row）。若 CSS 写死 display: none !important，动画可能失效。

5.2 淡入淡出：fadeIn、fadeOut、fadeToggle

$('.modal-overlay').fadeIn(250);
$('.modal-overlay').fadeOut(200, function () {
  $(this).remove();
});

// 淡到指定透明度 0.0 ~ 1.0
$('.banner__slides li.is-active').fadeTo(400, 1);
$('.banner__slides li').not('.is-active').fadeTo(400, 0);

admin-demo：删除商品行时用 fadeOut 再 remove，比瞬间消失更友好。

$tr.fadeOut(200, function () {
  $(this).remove();
  checkEmptyTable();
});

5.3 滑动：slideDown、slideUp、slideToggle

$('.sidebar').addClass('is-collapsed');
$('.sidebar__submenu').slideUp(0); // 初始收起

$('.sidebar__menu').on('click', '.has-children', function (e) {
  e.stopPropagation();
  $(this).children('.sidebar__submenu').slideToggle(200);
  $(this).toggleClass('is-expanded');
});

适合 手风琴菜单、筛选面板展开。行业常见 Layui 后台侧栏二级菜单常用 slideToggle。

5.4 自定义动画：animate

$('.stat-card.is-highlight').animate({
  marginLeft: '12px',
  opacity: 0.85
}, 300, 'swing', function () {
  $(this).animate({ marginLeft: '0', opacity: 1 }, 300);
});

// 连续队列（默认 fx 队列）
$('#notice-bar').animate({ height: '48px' }, 200)
               .animate({ backgroundColor: '#fff7ed' }, 300);

限制：颜色等非数值属性在纯 jQuery 核心中支持有限；复杂动画优先 CSS transition + 类名切换。

// 推荐：CSS 负责动画
$el.addClass('is-shake'); // @keyframes shake in admin-demo.css

5.5 停止与延迟

$('.marquee').stop(true, true); // 清空队列并跳到终点
$('.tooltip').delay(500).fadeIn(200);

5.6 遍历：each

var total = 0;
$('#product-tbody tr').each(function (index, domEl) {
  var price = parseFloat($(this).find('td').eq(2).text().replace('¥', ''), 10);
  if (!isNaN(price)) total += price;
  // return false 可提前 break
});
$('#stat-total-price').text('¥' + total.toFixed(2));

$.each({ sku: 'SKU-001', name: '礼盒' }, function (key, val) {
  console.log(key, val);
});

5.7 map、grep、inArray

var names = $.map(MOCK_PRODUCTS, function (item) {
  return item.name;
});

var inStock = $.grep(MOCK_PRODUCTS, function (item) {
  return item.stock > 0;
});

var idx = $.inArray('SKU-002', skus); // 找不到返回 -1

5.8 extend：浅拷贝与深拷贝

var defaults = {
  page: 1,
  size: 20,
  filters: { status: 'all' }
};

var userOpts = { page: 2, filters: { keyword: '示例' } };

// 浅拷贝：filters 会被覆盖而非合并