admin管理员组文章数量:1325775
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.
本文标签: javascriptSliding Div from left corner to right corner animationStack Overflow
版权声明:本文标题:javascript - Sliding Div from left corner to right corner animation - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742191157a2430238.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论