I am using this animation, which is almost working fine i.e I am moving/sliding Div from left corner to right corner. Now the problem is, that Div is not reaching to the Edge of right corner.

Fiddle here: /

I am providing my code here too:

HTML:

<div class="main_container">
    <div class="container">
    </div>
</div> 

CSS:

.container {
   border: black 1px solid;
   width: 10px;
   height: 10px;
   background-color: red;
}  
.main_container {
   border: black 1px solid;
   width: 100%;
   height: 12px;
}

Jquery:

$('.container').animate({
     width: 100,
     marginLeft: 300,
     marginRight: 0,
     display: 'toggle'
}, 5000); 

I am using this animation, which is almost working fine i.e I am moving/sliding Div from left corner to right corner. Now the problem is, that Div is not reaching to the Edge of right corner.

Fiddle here: http://jsfiddle/b6KuE/16/

I am providing my code here too:

HTML:

<div class="main_container">
    <div class="container">
    </div>
</div> 

CSS:

.container {
   border: black 1px solid;
   width: 10px;
   height: 10px;
   background-color: red;
}  
.main_container {
   border: black 1px solid;
   width: 100%;
   height: 12px;
}

Jquery:

$('.container').animate({
     width: 100,
     marginLeft: 300,
     marginRight: 0,
     display: 'toggle'
}, 5000); 

• javascript
• jquery
• html
• css
• animation

• Make margin left property of the animation 100% or something like 1400px – Popsyjunior Commented Sep 19, 2013 at 7:48
• you need to change margin-left value. check this fiddle: jsfiddle/b6KuE/23 – AloneInTheDark Commented Sep 19, 2013 at 7:49

7 Answers 7

The simplest solution is using right and an absolute position.

jsFiddle Demo

JS:

$('.container').animate({ right: 0 }, 5000);

CSS:

.container {
    width:100px;
    position: absolute;
    right: 100%
}
.main_container {
    position: relative;
    overflow: hidden;
}

Check this fiddle. you have to define marginLeft according to width.

use this code.

$('.container').animate({
    width: 100,
    marginLeft: $(".main_container").width()-100,
    marginRight: 0,
    display: 'toggle'
}, 5000);

I you're moving it from left to right, the width property doesn't have to change. You need to set the margin left and position in the css properties like so:

$('.container').animate({
     position: 'absolute',
        marginLeft: '100%',
        marginRight: 0,
        display: 'toggle'
    }, 5000);

Updated code:

var containerWidth = $('.main_container').width();
var marginLeft = containerWidth - 100 - 2;
$('.container').animate({
    width: 100,
    marginLeft: marginLeft,
    marginRight: 0,
    display: 'toggle'
}, 5000);

Try this:

$('.container').animate({  
width: 100, 
right: 0, 
display: 'toggle'
 }, 5000);

Fiddle here: http://jsfiddle/b6KuE/49/

$('.container').animate({
        width: 100,
     marginLeft: '81.5%',
        marginRight: 0,
        display: 'toggle'
    }, 5000);

check this fiddle.