CODEWITHSUNDEEP
javascriptjquery
Mario Rossi
Mario Rossi

Reputation: 17

jQuery reduce the width from left to right

Hello I have a DIV that has a width of 500px.

I am trying to reduce the width with an animation from 500px to 0px and from 0px to 500px again.

There is only a problem, that the DIV is reduced starting from the right to the left.

I want the opposite thing.

From the start the width will be reduced and animated from left to right, and then will be increased from 0px to 500px starting from right to left.

How can I do it with jQuery?

Thanks for any help

EDITED

function animateText(px) {
  $('#slidetext').animate({
   'width' : px
  });
 }

Upvotes: 1

Views: 1537

Answers (4)

Valli69
Valli69

Reputation: 9892

Try this one, this can be done using css3 without using any javascript/jquery code. The below is my fiddle.
using @keyframe and animation property http://jsfiddle.net/eQMyq/2/

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

see this example fiddle : http://jsfiddle.net/TC9Mn/

The idea is to wrap your element inside a a container with position: relative and assign to the element you want to animate position: absolute and right: 0

in this way the width changes from left to right

Upvotes: 0

Ranganadh Paramkusam
Ranganadh Paramkusam

Reputation: 4358

Are you trying for this

jsFiddle

$("#div2").animate({
          'width':'50%',
          'left':'49%'
},1000);​

Upvotes: 0

Mathew Thompson
Mathew Thompson

Reputation: 56429

It's possible, but you'll need to use position: absolute, see my Fiddle HERE

function animateText(px) {
    $('#slidetext').animate({
       left: $("#slidetext").width(),
       width: px
    });
}

Upvotes: 1

Related Questions