I have div with width:125px; height:125px. How to create small bars before displaying it?

When clicked on <a href="#">Menu</a> make transition, like small bars are forming the div

smoething like http://workshop.rs/projects/jqfancytransitions/

Recommended Answers

All 4 Replies

First of all you need all same size images.
Now inside the div have 5 img tags each of width 25px;
Set the Background of each to say img1.jpg.
Now adjust background position property of each.
1st img tag left value = 0, for second = -25 so that the next 25px is shown, then -50 for next and so on.
You can Use Jquesry to animate like it is happening in the link you gave. If you have troube with animating tell me.

no images just div. I want transition to single div not on images

What is inside div??
Do you have background images inside div??
My Previous Post is a bit wrong:
Inside the div you need to have 5 divs each of 25 px with background images at positions - 0, -25, -50,... and no image tags are needed.
My older post should have been this:
First of all you need all same size images.
Now inside the div have 5 other divs each of width 25px;
Set the Background of each to say img1.jpg initially.
Now adjust background position property of each.
1st div background position left value = 0, for second = -25 so that the next 25px is shown, then -50 for next and so on.
You can Use Jquery to animate like it is happening in the link you gave. If you have trouble with animating tell me.
On clicking each link the background image should be changed according to the link clicked.

no background images only div. I dont want to animate or change images. I want to add effect like in the source I provided . I want to add effect to DIV there is no image

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.