javascript - 将 Div 从左角滑动到右角动画

Question

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

在这里小提琴：http: //jsfiddle.net/b6KuE/16/

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

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;
}

查询：

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

Answer 1

最简单的解决方案是使用right和absolute position.

jsFiddle 演示

JS：

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

CSS：

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

Answer 2

检查这个小提琴。你必须marginLeft根据宽度来定义。

Answer 3

使用此代码。

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

Answer 4

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

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

Answer 5

更新代码：

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

Answer 6

试试这个：

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

在这里小提琴：http: //jsfiddle.net/b6KuE/49/

Answer 7

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

检查这个小提琴。