Question

我有一个非常简单的动画。我希望在（右：10px）的div.box向左移动：点击时为10px。容器宽度可以是可变的，因此div的左边缘总是动画到左边是至关重要的：10px。使用下面的代码，这不起作用。通过在单击div并进行一些计算时获得<body>的宽度，我成功地破解了它的移动方式，但是在调整浏览器大小后它会崩溃。有没有更好的方法来实现这一目标？我怀疑JS下面的问题源于这样一个事实：在JS运行之后，div.box的位置right: 10px;没有被删除。

JSFIDDLE： http://jsfiddle.net/5GL5r/15/

的 CSS 的

.box {
    width:100px;
    height:50px;
    background: red;
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
}

的 JS 的

$(".box").click(function() {
    $(this).animate({left:"10px"});
});

Answer 1

动画right属性（您已经尝试过）并在之后设置left属性可能对您有用。如果你在动画期间调整窗口大小，我只会'打破'，虽然在完成动画片后，一切看起来都会很好。

$(".box").click(function() {
    var parentWidth = $(this).parent().width();
    var newRight = parentWidth - $(this).width() - 10;
    $(this).animate({right: newRight}, function() {
        // On animation finish:
        $(this).css('right', 'auto')
               .css('left', '10px');
    });
});

JSFiddle

（编辑，在第一次评论后）：

JQuery.animate在开头计算步长。因此，如果您在动画期间调整父级div的大小，则使用不能正常工作的像素。但是，如果您使用百分比，它将起作用。以下可能是一个非常难看的黑客：

新的CSS（给你的盒子宽度包装，并且左边距为100％）

.wrap {
    height: 50px;
    background: #aaa;
    position:relative; 
    top:0;
    left:0;
    padding: 10px 110px 10px 10px;
}

.box {
    width:100px;
    height:50px;
    background: red;
    margin-left: 100%;
}

使用javascript：

将左边距设为0％

$(".box").click(function() {
    $(this).animate({
        marginLeft: '0%'
    });
});

JSFiddle（我给它的速度很慢，所以你可以尝试调整帧的大小）

jquery .animate使对象跳转

1 个答案: