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);
Share
Improve this question
edited Sep 19, 2013 at 11:32
Itay
16.8k2 gold badges56 silver badges72 bronze badges
asked Sep 19, 2013 at 7:44
Hassan SardarHassan Sardar
4,52317 gold badges61 silver badges92 bronze badges
2
- 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
Reset to default 4The 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.