jquery Tutorial: Creating layers for sliding animation effects

Use jquery to make layers of sliding animation effects

Basic principle

These dynamic-effect sliding boxes are based on the same basic principle. The div tag with ". Boxgrid" acts as a window after you go through the other two items that you want to "glimpse" the object. Don't you get it? Let this picture give you clues:

Understanding this rationale, we can use the animation effect of sliding elements to uncover or mask the area to be displayed, in order to create a sliding effect.

The first step –CSS basic work

In the illustration of the basic structure above, we need to use a little CSS to let it show the desired effect. The following CSS defines the default position for the View window (. Boxgrid) that sets the picture on the left and top, which is important for overlapping explanations when sliding. And don't forget that Overflow:hidden will make it all possible.

. 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;
}

If you are not going to use CSS to implement a translucent description, you can skip to step two:

. 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)";
}

Now, we need to set the default starting point for the description layer (caption box, which feels the layer is too good). If you want it to be completely hidden when you initialize it, you will need to set top and left as the height and width of your window (. Boxgrid), which is determined by the direction in which you want to slide. You can also make it appear only as part of the initialization, like this (defined by CSS). Caption and. Boxcaption:

. captionfull. boxcaption {
top:260;
left:0;
}
. Caption. boxcaption {
top:220;
left:0;
}