将 Div 从左角滑动到右角动画答案

【问题标题】：Sliding Div from left corner to right corner animation将 Div 从左角滑动到右角动画
【发布时间】：2013-09-19 19:32:31
【问题描述】：

我正在使用这个动画，它几乎可以正常工作，即我正在移动/滑动 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;
}

Jquery：

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

【问题讨论】：

将动画的左边距属性设为 100% 或类似 1400px
您需要更改 margin-left 值。检查这个小提琴：jsfiddle.net/b6KuE/23

标签： javascript jquery html css animation

【解决方案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;
}

【讨论】：

不知道谁投反对票，即使我的帖子投反对票。请为我的帖子投票
这个答案看起来很公平。为什么答案被否决？任何原因？答案有什么问题吗？
这可能是这里最简单、最灵活的答案。讨厌的人会讨厌
@Necromancer 这与我的代码无关。在 jsFiddle 上使用 jQuery 1.10 时，IE10 出现异常。无论如何将我的小提琴更新为 jQuery 1.9.1 并且它正在工作

【解决方案2】：

检查此fiddle。你必须根据宽度定义marginLeft。

【讨论】：

【解决方案3】：

使用此代码。

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

【讨论】：

谁投反对票，连我的帖子都投反对票。请为我的帖子投票
@Itay 仍然没有完美的答案，我正在等待最好的解决方案，但不知道为什么我会投票失败？
这是更好的答案。
是的，我想这个答案更好
我给你两个理由。 1.你对试图回答你的问题的人很粗鲁。 2. 如果你一直要求人们投票给你，那么人们往往会做相反的事情。不要强迫人们投票。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

更新代码：

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

【讨论】：

【解决方案6】：

试试这个：

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

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

【讨论】：

【解决方案7】：

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

检查此fiddle。

【讨论】：