jQuery滑动框和标题

学习如何使用JQuery做动画幻灯片标题和图片的视图。
步骤1 - CSS基础工作

以下定义了观察窗(.boxgrid)和设置的默认位置的图像在左上角。这是重要的重叠而滑动的工作。不要忘记溢出:隐藏使这一切成为可能。
.boxgrid{
 width: 325px;
 height: 260px;
 margin:10px;
 float:left;
 background:#161613;
 border: solid 2px #8399AF;
 overflow: hidden;
 position: relative;
}
.boxgrid img{
 position: absolute;
 top: 0;
 left: 0;
 border: 0;
}
如果你不使用半透明的标题您完成CSS -移动到第2步。
.boxcaption{
 float: left;
 position: absolute;
 background: #000;
 height: 100px;
 width: 100%;
 opacity: .8;
 /* For IE 5-7 */
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
 /* For IE 8 */
 -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  }

不透明,在所有的浏览器中扮演好是一个粗糙的话题,如果你需要自学。

现在我们需要设置默认标题框的起点。
如果你想要它完全隐藏的最初,你会希望距离顶部或左匹配窗口的高度或宽度(.boxgrid),这取决于哪个方向滑动。你也可以让它最初部分可见,。标题。boxcaption说明。
.captionfull .boxcaption {
 top: 260;
 left: 0;
}
.caption .boxcaption {
 top: 220;
 left: 0;
}
步骤2 -添加滑动动画

$(document).ready(function(){
 //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
 //Vertical Sliding
 $('.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});
 });
 //Horizontal Sliding
 $('.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});
 });
 //Diagnal Sliding
 $('.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});
 });
 //Partial Sliding (Only show some of background)
 $('.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});
 });
 //Full Caption Sliding (Hidden to Visible)
 $('.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});
 });
 //Caption Sliding (Partially Hidden to Visible)
 $('.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});
 });
});