CODEWITHSUNDEEP
javascriptjquerycssjquery-animate
IGIT
IGIT

Reputation: 185

jQuery, shrink div width from left to right

As you can see there is a slide to the left and the with decreases from 100% to 0 at the same time.

I want to get this same effect but from left to right.

I can't get it right!

jQuery('#target').animate({ width: '0', left: '-25%' }, 1500, 'swing');

Example Fiddle: http://jsfiddle.net/RsBNk/

Upvotes: 1

Views: 3367

Answers (2)

Harry
Harry

Reputation: 89750

That is pretty simple. Align the image to the right and then decrease it by 25% using jQuery like below:

jQuery:

jQuery('#target').animate({ width: '0', right: '-25%' }, 1500, 'swing');

CSS:

.box {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0; /* Modified this line */
    height: 200px;
    background-image: url('http://images.icnetwork.co.uk/upl/uxbridgegazette/jul2012/0/4/marc-mccarroll-image-2-304314157.jpg');
    background-position: right; /* EDIT: This property needs to be set */
}

Updated Demo

Upvotes: 2

Anil kumar
Anil kumar

Reputation: 4177

May be this helps you 

$('#target').animate({
    width : '0',
    marginLeft: parseInt($('#target').css('marginLeft'),10) == 0 ?
        $('#target').outerWidth() : 0
}, 1500, 'swing');

check demo

Upvotes: 0

Related Questions