CODEWITHSUNDEEP
jquery
nsilva
nsilva

Reputation: 5614

jQuery - Image animation (right to left)

Is there a way to animate an image from right to left, like this but the opposite way round:-

<span id="logo"></span>

#logo {
  background: url(https://upload.wikimedia.org/wikipedia/en/b/bd/Random_App_Logo.png);
  width: 0;
  height: 646px;
  display: block;
}

$('#logo').animate({ width:'100%' });

I've tried:-

#logo {
  background: url(https://upload.wikimedia.org/wikipedia/en/b/bd/Random_App_Logo.png);
  width: 1350px;
  height: 646px;
  display: block;
  margin-left: 1350px;
}

$('#logo').animate({ marginLeft:'0px' });

But the image needs to stay in the same position. I would use an overlay but the background is a background image so this wouldn't work.

Upvotes: 2

Views: 80

Answers (3)

Dcoto
Dcoto

Reputation: 143

Use this with your current css except set the width in css to 0px;

 $('#logo').animate({marginLeft: '0px', width: '1350px'}, 2000);

Upvotes: 0

drosam
drosam

Reputation: 2896

You can use background-position: right center; to align the background-image to the right instead of the left of the div and float: right;to set the div to the right. See this

You also can do it without javascript DEMO

Upvotes: 1

mhodges
mhodges

Reputation: 11116

position: fixed(or absolute); right: 0; will give you the desired effect.

Demo

Upvotes: 0

Related Questions