33-解决方案
13.8.2 解决方案
在本秘诀中，我们将复习折叠演示中应用的一些概念，但是这里的动画在水平方向，而不像折叠中那样从垂直方向展开和折叠内容。还使用了CSS定位技巧来解决同时移动的面板中小的计算误差。不用担心每个面板之间的同步，具有完美像素的动画执行当中的精度也达到了几分之一秒，只要取得 <ul class="panels"> 中的最后一个 <li> ，并将其绝对定位到 <ul> 的右上角就可以了。那样，当所有面板的总宽度在移动时加起来大于 <ul> 的总宽度时，最后一个 <li> 就不会转到下一行。
1．面板——HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="false" />
<title>jQuery Cookbook - Ch.13 - Sliding Panels</title>
<link rel="stylesheet" type="text/css" href="../_common/basic.css" />
<link rel="stylesheet" type="text/css" href="panels.css" />
<script type="text/javascript" src="../_common/jquery.js"></script>
<script type="text/javascript" src="panels.js"></script>
</head>
<body>
<div id="container">
<ul class="panels">
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
</ul>
<ul class="panels">
<li>
<a href="#">A</a>
</li>
<li>
<a href="#">B</a>
</li>
<li>
<a href="#">C</a>
</li>
<li>
<a href="#">D</a>
</li>
<li>
<a href="#">E</a>
</li>
</ul>
</div>
</body>
</html>
2．面板——jQuery代码
//初始化
function init_panels() {
// 元素存在吗?
if (!$('ul.panels').length) {
//如果不存在,退出。
return;
}
// 动画速度
var speed = 200;
//为最后一个<li>添加类
$('ul.panels li:last-child').addClass('last');
// 以mouseover事件开始
$('ul.panels li').hover(function() {
// 修改目标<li>
$(this).stop().animate({
width: '360px',
fontSize: '150px'
// 速度
}, speed)
//修改兄弟<li>
.siblings('li').stop().animate({
width: '135px',
fontSize: '50px'
// 速度
}, speed);
},
//以mouseout事件结束
function() {
// 恢复目标<li>
$(this).stop().animate({
width: '180px',
fontSize: '100px'
//速度
}, speed)
// 恢复兄弟<li>
.siblings('li').stop().animate({
width: '180px',
fontSize: '100px'
//速度
}, speed);
});
}
// 启动
$(document).ready(function() {
init_panels();
});