响应式设计中的jQuery滑动切换特效

openbiox

于 2025-07-01 09:10:11 发布

阅读量870

点赞数 14

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_34547628/article/details/149060404

本文还有配套的精品资源，点击获取

简介：本特效利用jQuery库实现一种优雅的滑动块状区域覆盖切换效果，通过响应式设计，它适应不同屏幕尺寸并提供一致的用户体验。开发者可以利用jQuery的选择器、DOM操作和动画功能来创建动态内容展示，结合CSS进行样式控制，以实现现代网页设计中的交互式内容切换。
jQuery滑动块状区域覆盖切换特效代码

1. jQuery滑动切换特效实现

滑动切换特效是一种普遍应用于现代网页设计中的交互元素，能够为用户提供平滑而直观的视觉体验。借助jQuery库，开发者能够轻松实现这类动态效果，使得用户界面变得生动活泼。本章节将探讨如何使用jQuery来创建一个基本的滑动切换特效，并解析其背后的实现原理。

1.1 jQuery滑动切换特效简介

滑动切换特效通常涉及对一个或多个元素的高度或宽度进行动画处理，以实现滑动效果。该特效可以在多种场景中使用，例如图片轮播、选项卡切换或模态框的显示与隐藏。在jQuery中，实现这一效果主要依赖于 slideDown() 、 slideUp() 、 slideToggle() 等方法。

1.2 创建基础滑动切换特效

下面的代码段展示了如何使用jQuery实现一个简单的滑动切换特效：

// HTML部分
<div id="toggleContent">点击按钮，切换显示或隐藏此部分内容</div>
<button id="toggleButton">切换</button>

// jQuery部分
$(document).ready(function() {
  $('#toggleButton').click(function() {
    $('#toggleContent').slideToggle();
  });
});

上述代码中，我们绑定了一个点击事件到按钮上，当点击时，与按钮同级的 div 元素会进行滑动切换。

1.3 深入理解滑动切换的逻辑

为了深入了解jQuery的滑动切换特效，我们需要理解 slideToggle() 方法的工作原理。 slideToggle() 方法会在元素显示与隐藏之间切换。它首先获取元素当前的高度，然后使用 slideDown() 或 slideUp() 方法来改变元素的高度，并在动画完成后切换元素的CSS display 属性。

随着本章节的深入，我们将探讨更高级的滑动切换技术，如定时器的使用、动画缓动效果以及滑动切换特效在实际项目中的应用案例。这将有助于开发者创建更为复杂和动态的用户交互效果。

2. jQuery库在动态内容展示中的应用

在现代Web开发中，动态内容展示是构建富有交互性和吸引力的网页的关键。jQuery作为JavaScript的一个库，极大地简化了DOM操作，事件处理，以及动画效果的实现，因此在动态内容展示方面有着广泛的应用。本章将详细介绍jQuery的核心功能，并通过实践案例分析，深入探讨如何在项目中有效地应用这些功能。

2.1 jQuery库的核心功能介绍

2.1.1 jQuery选择器的使用

jQuery选择器是快速定位和操作DOM元素的强大工具。它允许开发者通过简单的语法选取页面上的元素，并进行进一步的操作。选择器可以基于元素的id、class、类型、属性等多种标准进行选择。

// 选择器示例：获取id为"myID"的元素，并改变其背景色
$('#myID').css('background-color', 'red');

// 获取所有class为"myClass"的元素，并将它们的内容显示出来
$('.myClass').each(function() {
    console.log($(this).text());
});

2.1.2 jQuery DOM操作技巧

jQuery的DOM操作能力十分强大，它可以创建、插入、替换、删除DOM元素等。这些操作是动态内容展示不可或缺的部分。

// 创建一个新的div元素并添加到body中
var newDiv = $('<div/>', { 
    class: 'new-div', 
    text: '新创建的div'
});
$('body').append(newDiv);

// 删除id为"removeMe"的元素
$('#removeMe').remove();

2.1.3 事件处理机制与回调函数

事件处理是jQuery的又一核心功能。通过绑定事件到特定的DOM元素上，可以响应用户的点击、滚动、键盘输入等操作。

// 绑定点击事件到class为"clickMe"的元素
$('.clickMe').on('click', function() {
    alert('被点击了！');
});

// 使用事件委托处理动态添加的元素的点击事件
$(document).on('click', '.dynamicClick', function() {
    alert('动态添加的元素被点击了！');
});

2.2 jQuery动画与动态内容展示

2.2.1 理解jQuery的动画方法

jQuery提供了丰富的动画方法，如淡入淡出、滑动和自定义动画，这些方法通过简单地调用API即可实现复杂的动态效果。

// 淡入效果：让id为"fadeMe"的元素逐渐变为可见
$('#fadeMe').fadeIn();

// 滑动效果：将id为"slideMe"的元素滑动到隐藏
$('#slideMe').slideUp();

// 自定义动画：自定义宽度、透明度变化的动画
$('#customAnimate').animate({
    width: '200px',
    opacity: 0.5
}, 1000); // 1000毫秒内完成动画

2.2.2 动态内容加载与交互

动态内容加载通常指的是通过Ajax获取服务器端的数据，然后使用jQuery将这些数据插入到页面中，从而更新页面内容而无需重新加载整个页面。

// 使用jQuery的$.ajax方法从服务器获取数据
$.ajax({
    url: 'data.php',
    type: 'GET',
    success: function(data) {
        // 将获取的数据添加到页面中
        $('#container').append(data);
    },
    error: function() {
        alert('数据加载失败！');
    }
});

2.2.3 过渡效果与动画缓动

jQuery的动画效果可以和缓动函数（Easing）一起使用，来实现更平滑、更自然的动画过渡效果。

// 滑动效果使用缓动函数：使元素缓慢开始和结束动画
$('#easingExample').slideDown(1000, 'easeInOutExpo');

2.3 jQuery实践案例分析

2.3.1 动态内容展示案例

在一个在线电子商务网站中，使用jQuery来展示产品推荐是非常普遍的。产品信息通常由服务器动态返回，并且通过Ajax技术加载到页面的指定部分。jQuery可以用来处理这些数据，并以动画的形式展示给用户。

// 假设从服务器返回产品数据
var products = [
    { name: '产品1', price: '19.99', id: 1 },
    { name: '产品2', price: '29.99', id: 2 },
    { name: '产品3', price: '39.99', id: 3 }
];

// 动态创建产品列表并添加到页面的"productContainer"容器中
var productContainer = $('#productContainer');
products.forEach(function(product) {
    var productElement = $('<div/>', { class: 'product' });
    productElement.append($('<h3/>').text(product.name));
    productElement.append($('<p/>').text('价格: ' + product.price));
    productContainer.append(productElement);
});

2.3.2 切换特效在实际项目中的应用

在项目中，切换特效通常用于展示图片画廊、产品详情切换、用户评论展示等。例如，可以使用jQuery制作一个图片画廊，当用户点击不同的缩略图时，主显示区域会切换到对应的图片。

// 假设有一个图片画廊，用户点击某个缩略图
$('.thumbnail').on('click', function() {
    var selectedImage = $(this).find('img').attr('src'); // 获取图片的src属性
    $('#mainImage').fadeOut(300, function() { // 先淡出当前图片
        $('#mainImage').attr('src', selectedImage).fadeIn(300); // 切换图片并淡入
    });
});

通过本章节的介绍，我们可以看到jQuery库不仅提供了方便快捷的操作DOM的工具，而且通过其丰富的动画和事件处理功能，使得开发者能够以非常直观的方式增强用户界面的动态交互性。下一章将会更深入地探讨响应式设计的基本原则及其对用户体验的影响。

3. 响应式设计与用户体验

响应式设计是现代Web开发中不可或缺的一部分，它确保了网站无论在何种设备上都能提供良好的用户体验。本章将详细探讨响应式设计的基本原则、用户体验设计要素以及如何在响应式设计中实现滑动切换特效。

3.1 响应式设计的基本原则

响应式设计的目的是创建一个能够在不同屏幕尺寸和分辨率下保持布局一致性的网站。设计师和开发者通过媒体查询和弹性布局技术来实现这一目标。

3.1.1 媒体查询与断点设置

媒体查询是CSS3的一部分，它允许开发者根据不同的设备特性来应用不同的样式规则。最常用的媒体查询包括屏幕尺寸和分辨率的断点设置。

/* 基础样式 */
.container {
  width: 100%;
  padding: 20px;
}

/* 小屏幕设备断点 */
@media (min-width: 480px) {
  .container {
    padding: 10px;
  }
}

/* 中等屏幕设备断点 */
@media (min-width: 768px) {
  .container {
    padding: 15px;
  }
}

/* 大屏幕设备断点 */
@media (min-width: 992px) {
  .container {
    width: 960px;
    padding: 20px;
  }
}

在上述代码中， .container 类根据不同的屏幕宽度应用不同的内边距。通过设置适当的断点，我们可以确保网站在小屏设备（如手机）和大屏设备（如桌面显示器）上均有良好的可读性和布局效果。

3.1.2 流式布局与弹性盒子模型

弹性盒子模型（Flexbox）是一种CSS布局方式，它提供了一种更加灵活的方式来构建响应式界面。通过使用flex容器和flex项目，可以创建灵活的网格结构，使内容能够在不同屏幕尺寸下进行伸缩。

/* Flexbox布局 */
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 25%; /* 这里设置每个项目占据容器宽度的25% */
  padding: 10px;
}

通过上述简单的Flexbox代码，我们可以实现一个即使在屏幕尺寸变化时也能保持内容整齐布局的响应式设计。

3.2 用户体验设计要素

用户体验（UX）是衡量一个网站是否成功的关键指标。响应式设计必须考虑到用户体验设计的各个方面，以确保用户无论通过何种设备访问都能获得良好的体验。

3.2.1 用户界面与交互设计

用户界面（UI）和交互设计是UX的核心，它们决定了用户与网站的互动方式。一个良好的响应式设计应该提供直观、简洁的界面以及流畅的交互体验。

3.2.2 性能优化与加载速度

网站的加载速度直接影响用户体验。响应式设计需要在不同设备上进行性能优化，如压缩图片、使用CDN、减少HTTP请求等，以缩短加载时间。

// 图片压缩示例代码
const images = document.querySelectorAll('img');
images.forEach(image => {
  image.onload = () => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    let width = image.width;
    let height = image.height;
    canvas.width = width;
    canvas.height = height;
    context.drawImage(image, 0, 0, width, height);
    // 压缩图片，这里假设目标大小为原图的80%
    if (canvas.width * canvas.height > targetSize) {
      const maxSize = Math.sqrt(targetSize);
      if (width > height) {
        if (canvas.width > maxSize) {
          canvas.width = maxSize;
          canvas.height *= canvas.width / width;
        }
      } else {
        if (canvas.height > maxSize) {
          canvas.height = maxSize;
          canvas.width *= canvas.height / height;
        }
      }
      image.src = canvas.toDataURL('image/jpeg', 0.8);
    }
  }
});

上述JavaScript代码演示了如何通过动态调整图片大小来减少其在网页上的尺寸，从而加快页面加载速度。

3.3 实现响应式滑动切换特效

在响应式设计中，滑动切换特效是一种常用的方式来展示内容。这种特效不仅美观，而且能在有限的屏幕上展示更多的内容。

3.3.1 响应式布局在特效中的应用

在响应式布局中应用滑动切换特效时，需要确保特效在不同屏幕尺寸下均能正常工作。为此，需要使用媒体查询来调整特效的尺寸和布局。

/* 响应式滑动特效样式 */
.slide-container {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}

.slide {
  display: inline-block;
  width: 100%;
  transition: transform 0.5s ease;
}

/* 响应式断点 */
@media (min-width: 600px) {
  .slide {
    width: 50%;
  }
}

@media (min-width: 900px) {
  .slide {
    width: 33.333%;
  }
}

在这个例子中， .slide 类定义了每个滑动项目的宽度，并通过 transition 属性添加了平滑的过渡效果。媒体查询则根据屏幕宽度调整每个项目所占的宽度，从而在小屏和大屏设备上提供不同的布局。

3.3.2 优化用户体验的技术要点

为了进一步提升用户体验，响应式滑动切换特效应当在触控设备和鼠标操作间提供一致的响应。此外，应优化触摸滑动事件以减少卡顿，并确保特效在不同浏览器和设备上的兼容性。

// 触摸滑动事件的JavaScript优化
let startX,滑动距离;
const slider = document.querySelector('.slide-container');

slider.addEventListener('touchstart', function(e) {
  startX = e.touches[0].clientX;
}, false);

slider.addEventListener('touchmove', function(e) {
  let currentX = e.touches[0].clientX;
  滑动距离 = startX - currentX;
  startX = currentX;
  e.preventDefault();
  slider.style.transform = `translateX(${滑动距离}px)`;
}, false);

在上述JavaScript代码中，我们通过监听 touchstart 和 touchmove 事件，获取触摸开始和移动时的位置，计算滑动距离并动态地改变滑动容器的位置，从而实现了滑动切换特效。

综上所述，响应式设计与用户体验之间存在着密切的联系，而实现良好的响应式滑动切换特效需要综合运用CSS媒体查询、弹性布局以及JavaScript事件处理等多种技术。通过这些技术的合理运用，开发者可以创造出既美观又实用的Web界面，为用户提供一致且优秀的跨设备体验。

4. 选择器、DOM操作、事件处理和动画在特效中的角色

在现代网页设计和开发中，特效是提升用户体验的关键因素之一。而jQuery作为JavaScript的一个库，提供了简单易用的API，使得开发者能够快速实现选择器、DOM操作、事件处理和动画等复杂功能。本章节将深入探讨这些技术在特效中的角色和应用。

4.1 选择器与元素定位

4.1.1 复杂选择器的应用

选择器是jQuery的核心，它允许开发者快速定位到页面中的元素。jQuery提供了一套丰富的选择器系统，能够满足从简单到复杂的各种元素定位需求。

// 示例：使用属性选择器定位包含特定类名的所有元素
$('div[class^="item-"]')

在上述代码中， $ 是jQuery函数，括号内是我们传入的选择器字符串。 div[class^="item-"] 代表选择所有 <div> 元素，其类名以 item- 开头。这种属性选择器非常有用，比如在处理动态生成的内容时，可以方便地选中特定的元素。

4.1.2 DOM元素的选取与过滤

除了简单的选择器，jQuery还允许我们对选择集进行过滤，以便更精确地选取元素。

// 示例：选取所有偶数位置的元素
$('li:even')

在此例中， :even 是一个过滤器，它会选取所有偶数索引的 <li> 元素。这种过滤技术非常适合处理列表和表格数据，进行动态的内容展示。

4.2 DOM操作的高级技巧

4.2.1 DOM结构的动态添加与删除

在页面交互中，我们常常需要动态地向DOM中添加或删除元素。jQuery简化了这一过程，让我们能够通过简单的API完成复杂的DOM操作。

// 示例：动态向body添加一个新的列表项
$('body').append('<li>New List Item</li>');

上述代码展示了如何使用 append() 方法将一个新元素添加到 <body> 标签的末尾。类似的方法如 prepend() 、 before() 、 after() 等，允许我们以不同方式操作DOM元素。

4.2.2 DOM元素属性与内容的动态操作

除了添加和删除，jQuery还能让我们动态地修改DOM元素的属性和内容。

// 示例：修改具有特定ID的元素的样式和文本内容
$('#elementId').css('background-color', 'red').text('Updated Text');

上述代码中，我们首先通过ID选择器选中了一个元素，然后使用 css() 方法改变了其背景颜色，再通过 text() 方法更新了它的文本内容。这种能力使得开发者可以在用户交互的过程中，实时地更新页面的视觉表现。

4.3 事件处理与动画结合

4.3.1 事件委托与动态绑定

事件处理是网页交互的核心。jQuery优化了事件的绑定过程，特别值得一提的是事件委托，它允许我们将事件监听器绑定到一个父元素上，利用事件冒泡机制来处理子元素的事件。

// 示例：使用事件委托处理动态添加的按钮点击事件
$('#parent-element').on('click', 'button', function() {
    // 处理点击事件
});

在此代码中，尽管 button 元素可能是在后来动态添加到 #parent-element 内的，但由于事件委托机制，我们依然能够捕捉到这些按钮的点击事件。

4.3.2 动画的回调与队列管理

动画是jQuery库中非常受欢迎的功能之一，它提供了一系列的动画方法来制作平滑的用户界面变化。

// 示例：动画完成后执行的回调函数
$('.box').animate({ width: '200px' }, 1000, function() {
    alert('动画完成');
});

在这里， animate() 方法被用来制作宽度变化的动画，动画持续时间设置为1000毫秒。动画完成后，会触发一个回调函数，这个函数在动画完成时异步执行。

在本章节中，我们对jQuery中的选择器、DOM操作、事件处理和动画进行了全面的探讨，分析了它们在实现动态特效中的具体应用。通过代码和逻辑分析，我们不仅了解了每个技术点的使用方法，还学习了它们如何共同工作以提供丰富的用户体验。这些技术的综合运用，让开发者能够在前端开发中发挥出惊人的创造性和效率。在下一章节中，我们将继续深入CSS样式控制与动态行为的结合，探索如何利用这些技术来进一步提升网页的视觉效果和交互能力。

5. CSS样式控制与动态行为的结合

在网页设计中，CSS扮演着至关重要的角色。它不仅负责页面的布局和风格，还与JavaScript及jQuery结合，实现丰富的动态交互效果。本章节将深入探讨CSS在页面布局中的作用、CSS与jQuery的动态行为以及样式控制的最佳实践。

5.1 CSS在页面布局中的作用

5.1.1 CSS盒模型与布局技巧

在前端开发中，盒模型（Box Model）是理解CSS布局的基础。它由边框（border）、外边距（margin）、内边距（padding）以及实际内容（content）组成。掌握盒模型对于创建响应式设计至关重要。

.box {
    width: 100px;
    padding: 10px;
    border: 5px solid #333;
    margin: 15px;
}

在此例中，我们定义了一个元素的宽度为100px，但实际显示宽度会因为内边距和边框的加入而变大。开发者需要基于完整的盒模型计算来设计布局。

5.1.2 CSS3的新特性应用

CSS3引入了多种新特性，如圆角（border-radius）、阴影（box-shadow）、过渡（transition）、动画（animation）等。这些特性让页面的动态效果变得更加流畅和吸引人。

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition: background-color 0.5s;
}
.button:hover {
    background-color: #45a049;
}

这里展示了一个按钮在鼠标悬停时背景颜色的渐变过渡效果，是使用CSS3 transition属性实现的。

5.2 CSS与jQuery的动态行为

5.2.1 CSS与jQuery的协同工作模式

在实现动态行为时，CSS和jQuery能够有效地协同工作。通常，我们先用CSS设置好基础样式，然后用jQuery添加动态交互。例如，一个简单的手风琴菜单，可以使用jQuery来动态控制内容的显示与隐藏，CSS则用来美化界面。

$('.accordion').click(function() {
    $(this).next('.panel').slideToggle('fast');
});

上述代码实现了点击手风琴项时，相关内容的滑动切换效果。

5.2.2 利用CSS3动画增强交互效果

为了使动态效果更加吸引用户，CSS3动画可以与jQuery完美结合，提供更加流畅的用户体验。通过定义关键帧（@keyframes）来创建自定义动画，然后通过jQuery触发这些动画。

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

通过jQuery来应用动画：

$('.box').addClass('animate');

此处的 animate 类中定义了我们之前定义的 example 关键帧动画。

5.3 样式控制的最佳实践

5.3.1 样式复用与模块化

在大型项目中，样式复用和模块化是必须遵守的最佳实践。通过SCSS或LESS这类CSS预处理器，可以轻松实现变量、混合、继承等编程语言特性，增强代码的可维护性和可读性。

$primary-color: #3498db;

.button {
    background-color: $primary-color;
    &:hover {
        background-color: darken($primary-color, 10%);
    }
}

上述SCSS代码展示了如何定义一个颜色变量，并在按钮类中应用它。

5.3.2 浏览器兼容性与样式前缀处理

不同的浏览器可能支持CSS的不同版本，因此在编写样式时需要考虑浏览器兼容性问题。使用工具如Autoprefixer，可以自动添加浏览器前缀，确保样式在不同浏览器上正常工作。

npx postcss --use autoprefixer -o output.css input.css

该命令使用了PostCSS和Autoprefixer插件处理CSS文件，自动添加缺失的浏览器前缀。

在本章节中，我们从CSS在页面布局中的作用开始，然后探讨了与jQuery动态行为的协同工作，最后深入了样式控制的最佳实践。通过CSS与jQuery结合，我们可以创造出既美观又具备高度交互性的网页界面。下一章节将详细探讨滑动块状区域覆盖切换技术要点。

6. 滑动块状区域覆盖切换技术要点

滑动切换技术是现代Web界面中常见的交互方式之一，能够实现内容的无缝过渡，提升用户体验。本章将深入探讨滑动切换的技术原理、优化策略以及综合应用案例。

6.1 滑动切换的技术原理

滑动切换技术的实现，主要基于JavaScript定时器以及动画帧控制，辅以CSS的过渡效果（Transitions）和动画（Animations）。在jQuery中，常见的是 animate 方法来实现滑动效果。

6.1.1 JavaScript定时器与动画帧控制

JavaScript定时器提供了一种控制时间间隔的方法，可以用来执行周期性任务，如连续帧动画。在滑动切换中， setTimeout 或 setInterval 可以用来定时更新元素的位置属性，从而创建动画效果。

var slide = 0; // 初始位置
var speed = 200; // 动画速度，单位毫秒
var intervalId = setInterval(function() {
  slide += 1; // 每次移动1px
  $('#slider').css('left', slide + 'px');
  if (slide >= 300) clearInterval(intervalId); // 到达指定位置后停止动画
}, 10); // 每10毫秒更新一次位置

6.1.2 滑动动画的实现机制

在jQuery中，滑动动画通常是通过改变元素的CSS top 或 left 属性来实现的。 animate 方法可以接受一个对象作为参数，该对象定义了元素的最终状态，然后jQuery通过计算中间状态来创建平滑的动画效果。

$('#slider').animate({
  left: '+=300px' // 将元素向右滑动300px
}, speed, function() {
  // 动画完成后的回调函数
});

6.2 切换特效的优化策略

滑动切换特效在提升用户体验的同时，也对性能提出了更高的要求。优化策略主要集中在性能优化和内存管理，以及解决浏览器兼容性问题。

6.2.1 性能优化与内存管理

为了确保动画流畅，性能优化不可或缺。首先，应减少DOM操作，避免在动画过程中创建或删除DOM元素。其次，可以使用 requestAnimationFrame 来代替 setTimeout 或 setInterval ，它能够确保浏览器在下一次重绘之前执行动画代码。

function slide() {
  slide += 1;
  $('#slider').css('left', slide + 'px');
  if (slide < 300) requestAnimationFrame(slide);
}
requestAnimationFrame(slide);

在内存管理方面，对于不再使用的变量，尤其是那些在动画过程中产生的临时对象，应适时地进行垃圾回收。

6.2.2 兼容性问题的处理方法

虽然现代浏览器普遍支持动画，但为了兼容性考虑，我们可能需要添加额外的逻辑来处理不支持 requestAnimationFrame 的老版本浏览器。

if (!window.requestAnimationFrame) {
  window.requestAnimationFrame = (function() {
    return window.webkitRequestAnimationFrame ||
           window.mozRequestAnimationFrame ||
           window.oRequestAnimationFrame ||
           window.msRequestAnimationFrame ||
           function(callback) {
             window.setTimeout(callback, 1000 / 60); // 假设每秒60帧
           };
  })();
}

6.3 滑动切换特效的综合应用

实现滑动切换特效并不复杂，但要将其应用到实际项目中并优化到极致，则需要更多的实践和探索。

6.3.1 实现多区域的平滑切换

多区域滑动切换时，需要考虑的是如何管理多个动画序列。可以使用 Deferred 对象来控制动画的串行和并行执行。

function slideBlock(block, dir) {
  var dfd = $.Deferred();
  var slideSpeed = 400;
  var $block = $(block);
  var $nextBlock = dir === 'next' ? $block.next() : $block.prev();
  if ($nextBlock.length) {
    $block.animate({right: '+=200'}, slideSpeed, function() {
      // 动画结束后的操作
      dfd.resolve();
    });
    $nextBlock.css('display', 'block').animate({left: '+=200'}, slideSpeed, function() {
      // 动画结束后的操作
      $block.hide();
      $nextBlock.css('display', '');
      dfd.resolve();
    });
  }
  return dfd.promise();
}

$.when(slideBlock('#block1', 'next'), slideBlock('#block2', 'next'))
  .done(function() {
    // 所有动画完成后执行
  });