11.1　再谈动画

为了让大家回忆起jQuery的效果方法，同时也为本章的讲解设置一个起点，我们就先从简单的鼠标悬停动画开始吧。这个悬停动画就是在一个页面上，其中包含几张照片的缩略图，当用户鼠标移动到每个缩略图上时，照片会“膨胀”，而当鼠标离开时，照片又会收缩回原来的大小。这个页面的HTML代码（如下所示）还包含一些文本内容，但目前是隐藏的，本章后面会用到它们。

<div class="team">
  <div class="member">
    <img class="avatar" src="photos/rey.jpg" alt="" />
    <div class="name">Rey Bango</div>
    <div class="location">Florida</div>
    <p class="bio">Rey Bango is a consultant living in South Florida, specializing in web application development...</p>
  </div>
  <div class="member">
    <img class="avatar" src="photos/scott.jpg" alt="" />
    <div class="name">Scott González</div>
    <div class="location">North Carolina</div>
    <div class="position">jQuery UI Development Lead</div>
    <p class="bio">Scott is a web developer living in Raleigh, NC...</p>
  </div>
  <!--以下的代码类同... -->
</div>

　下载示例代码

如同本书其他HTML、CSS以及JavaScript示例一样，上面的标记只是完整文档的一个片段。如果读者想试一试这些示例，可以从以下地址下载完整的示例代码： Packt Publishing 网站 http://www.packtpub.com/support ，或者本书网站 http://book.learningjquery.com/。

最初，每幅照片相关的文本都通过 CSS 隐藏了，因为相应的 <div> 都被挪到了它们overflow:hidden容器的左边：

.member {
  position: relative;
  overflow: hidden;
}
.member div {
  position: absolute;
  left: -300px;
  width: 250px;
}

以上HTML加上CSS会得到垂直排列的一组图像，如图11-1所示。与每幅图像关联的文本内容暂时先隐藏了。

图　11-1

为了修改图像的大小，我们将把其高度和宽度从75px变为85px。与此同时，为了保持图像居中，还要将其内边距由5px减少为0px，参见代码清单11-1。

代码清单11-1

$(document).ready(function() {
  $('div.member').on('mouseenter mouseleave', function(event) {
    var size = event.type == 'mouseenter' ? 85 : 75;
    var padding = event.type == 'mouseenter' ? 0 : 5;
    $(this).find('img').animate({
      width: size,
      height: size,
      paddingTop: padding,
      paddingLeft: padding
    });
  });
});

代码清单11-1中代码的重复了第10章的模式。因为在鼠标进入和离开指定区域时要执行的大部分操作相同，所以我们把mouseenter和mouseleave这两个事件处理程序组合到了一个函数中，而没有用两个回调函数去调用.hover()。这个联合的处理程序首先根据当前事件的类型来确定size和padding的值，然后再把这两个值传给.animate()方法。

好了，现在当鼠标放到一张图像上时，它就会得比其他图像稍大一些，如图11-2所示。

图　11-2