Question

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

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

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

Answer 1

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

jsFiddle Demo

<强> JS：

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

<强> CSS：

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

Answer 2

检查fiddle。你必须根据宽度来定义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);

检查此fiddle。

从左角到右角动画滑动Div

7 个答案: