CODEWITHSUNDEEP
javascriptjquerycsshtml
allence
allence

Reputation: 569

how to add sliding lines inside of an image

Hi I am struggling with a jquery problem what i need is, sliding lines inside of borders of an image. There are four lines and I want them to slide inside the border when the page is loaded. The first line should slide down to up; the second one left-to-right; the third one top-to-down and the fourth from right to left.

I hope that my question is clear.

enter image description here

(the mentioned lines are red)

Upvotes: 0

Views: 129

Answers (3)

meadowstream
meadowstream

Reputation: 4141

Here is a demo which uses only css.

It basically uses @keyframes to solve the problem.

Upvotes: 0

Joe Komputer
Joe Komputer

Reputation: 1345

You don't need JS to do this. Here is a pure CSS way of performing this animation onload, by using keyframes. Unless you want to support older browsers, this method should work.

Upvotes: 1

Martijn
Martijn

Reputation: 16113

I'll show the first two, you can do the other two

function slideLine1(){ $('#line1').animate({width: '100%'}, 1000, slideLine2); }
function slideLine2(){ $('#line2').animate({width: '100%'}, 1000, slideLine3); }

This will work. However, you can do this with 1 function, calling itself, and an i variable. That will be up to you.

There are other methods to do, this is a very basic example. A tip: Look into jQuery chaining.

Upvotes: 0

Related Questions