Jquery1.9.1源码分析系列（十五）动画处理之外篇

这是针对“Jquery1.9.1源码分析系列（十五）动画处理之外篇”这篇文章的完整攻略。以下是详细的解释：

1. 了解jQuery动画的基础

在本篇文章中，作者通过对jQuery动画的基础进行讲解，包括如何封装动画队列、如何使用fx对象管理动画、封装动画函数、以及通过定时器和requestAnimationFrame控制动画执行的流程。

2. 实例1：使用动画函数封装调用

示例代码如下：

function animateLeft() {
  $('.box').animate({
    left: 500
  }, 3000);
}

$('#btn1').click(function() {
  animateLeft();
});

$('#btn2').click(function() {
  animateLeft();
});

在这个示例中，我们定义了一个叫做animateLeft()的函数，来封装对左侧移动的动画实现。然后，我们将其绑定到两个不同的按钮上，以响应不同的调用。这样，我们可以轻松地复用该函数，并对不同的元素进行动画操作。

3. 实例2：使用定时器控制动画执行

示例代码如下：

var counter = 0,
    timer,
    div = $('#myDiv');

function moveIt() {
  clearInterval(timer);
  timer = setInterval(function() {
    counter++;
    div.css('left', counter + 'px');
    if (counter === 200) {
      clearInterval(timer);
    };
  }, 10);
};

$('#btn').click(function() {
  moveIt();
});

在这个示例中，我们使用定时器来控制动画的执行。我们定义了一个叫做moveIt()的函数，来控制对元素的左移操作，并使用setInterval来定时对元素位置进行更新。当left值达到200时，定时器被清除，动画停止。

总之，通过掌握这些知识点和示例代码，我们可以更好地理解jQuery动画的底层原理，并且可以更加灵活地使用动画效果来美化我们的网站和应用。