Javascript 将Div从左角滑动到右角动画

我正在使用这个动画，它几乎可以正常工作，即我正在从左角到右角移动/滑动。现在的问题是，Div没有到达右角的边缘

在这里拉小提琴：

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

我也在这里提供我的代码：

HTML:

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

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

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

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

Jquery:

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

使用此代码

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

---

最简单的解决方案是使用

右侧

和

绝对位置

JS:

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

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

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

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

CSS:

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

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

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

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

---

看看这个。您必须根据宽度定义

marginLeft

。

如果将其从左向右移动，则宽度属性不必更改。 您需要在css属性中设置左边距和位置，如下所示：

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

更新代码：

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

试试这个：

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

在这里拉小提琴：

---

选中此项。

将动画的“左边缘”属性设置为100%或类似的值，您需要更改“左边缘”值。检查这把小提琴：不知道谁投了反对票，甚至我的帖子也投了反对票。请把我的帖子投赞成票。这个答案似乎很公平。为什么答案被否决了？有什么原因吗？答案有什么问题吗？这可能是这里最简单、最灵活的答案。仇恨者会hate@Necromancer这与我的代码无关。IE10在JSFIDLE上使用jQuery 1.10时出现异常。无论如何，我把我的提琴更新到jQuery1.9.1，谁投了反对票，就连我的帖子也投了反对票。请把我的票投赞成票post@Itay还有不完美的答案，我在等待最好的解决方案，但不知道为什么我会落选？这是更好的答案。是的，我想这个答案更好。我给你两个理由。1.你回答问题时对ppl很粗鲁。2.如果你一直要求人民党投票支持你，那么人民党倾向于做相反的事。不要强迫人民党投票。