jQuery教程:制作滑动动画效果的层(2)
第二步 – 添加滑动动画
下一步是选择适合你的动画，我提供了几个预设的潜在需求（样式）。试用一下他们，选择一个符合你风格也是你需要的样式。
$(document).ready(function(){
//要更改上、下方向和左、右方向，只需要在top/left的值中添加"-"号（表示反方面）。
//垂直滑动
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});
//水平没去
$('.boxgrid.slideright').hover(function(){
$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
});
//比例缩放滑动
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
//部分滑动 (只显示一部分背景)
$('.boxgrid.peek').hover(function(){
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
//完全滑动的说明 (从完全隐藏到完全显示)
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
//部分滑动的说明 (部分显示-部分隐藏)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
});
});
第三步 – HTML
这里需要一些类（class）来作为jQuery的选择器，在心里存着这样的标准：
- DIV标签的类".cover"必须分配给任何一个想要滑动的对象；
- 有.boxgrid类的DIV标签，图片通常最先显示。
这是一个我将用在.captionfull动画的HTML例子：
<div class="boxgrid captionfull">
<img src="jareck.jpg"/>
<div class="cover boxcaption">
<h3>Jarek Kubicki</h3>
<p>Artist<br/><a href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" target="_BLANK">More Work</a></p>
</div>
</div>
好吧。文章标题就这样被我改了。不过，这样对于中文更好理解。而文章这最后一段就不用全译了。只要你知道，这些实例只是供你选择，要创造出一个适合自己的，就要自己动手。如果你有什么不懂的，欢迎到Tech Meme论坛来讨论。这里面没有很多人，因为需要邀请。但，大家喜欢讨论技术问题。如果你需要进来讨论，请联系我。不讨论的就不用邀请码了，因为你可以看到里面的所有文章，除了下载资料