Simple Layer Animation with JQuery
Morina Internet Solutions, Web Design and Training
Rheden, Netherlands
This is a simple animation with JQuery. At Morina Internet Solutions you can learn how to create professional slide shows, with automatic display of images and captions.
If you are a web developer, you can also learn how to create slide shows (with a timer) from images loaded by your users in applications programmed with PHP, ASP or ASP.Net. All you need is only five more lines of code from the JQuery file. Your users can have full control of their content (upload, edit, delete) with the interface you make for them.
The JQuery File
Create a new page and add a link to the JQuery file.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
CSS styles
Create CSS styles for your animation layer and its content.
<style type="text/css">
<!--
#myInfoContainer {
display: none;
margin: 20px;
padding: 10px;
position: absolute;
background: url(animation_demo_bg.gif) repeat-x;
color: #fff;
width:450px;
height:160px;
z-index: 99;
}
#myInfoContainer h1 {
font-size: 14px;
font-weight: bold;
padding: 0 0 4px 0;
margin: 0;
}
#myInfoContainer h2 {
font-size: 14px;
padding: 0 0 20px 0;
margin: 0;
}
#myInfoContainer p {
font-size: 11px;
margin: 0;
padding: 0 0 10px 0;
}
#clickToShowInfo {
cursor: hand;
}
-->
</style>
HTML code and the JQuery Function to Animate the Layer
Add the HTML element where the user can click on and the JQuery function to animate the layer; both inside the body tag. For this example I used a <span> with the id clickToShowInfo where the user can click on and the layer with the id myInfoContainer for the animation. The information layer does not show when the page loads because its display is set to none with CSS styles (display: none;).
<body>
<div><span id="clickToShowInfo">click here</span></div>
<div id="myInfoContainer">
<h1>My text</h1>
<h2>My text</h2>
<p>My text</p>
<p>My text</p>
</div>
<script>
$("#clickToShowInfo").click(function(){
$("#myInfoContainer").animate({
height: ['toggle', 'swing'],
opacity: 0.8
}, 1500, "linear" );
});
</script>
</body>
Images
animation_demo_bg.gif (original size 1 x 240px). This image is used as a background image for the information layer.
rheden.jpg (original size 850 x 390px)