jquery .animate使對象跳轉

我有一個非常簡單的動畫。我想div.box在（右：10px）移動到左側：10px點擊。容器寬度可能是可變的，所以關鍵是div的左邊緣總是動畫爲left：10px。下面的代碼不起作用。我已經成功地通過獲取寬度<body>來移動它，當div被點擊並進行一些計算，但在瀏覽器調整大小後崩潰。有沒有更好的方法來完成這一點？我懷疑下面JS的問題源於div運行的位置，right: 10px;，在JS運行後沒有被移除。jquery .animate使對象跳轉

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

CSS

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

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

來源

2014-03-30 Uncle Slug

什麼不妥增強'right'呢？就像[這個小提琴]一樣（http://jsfiddle.net/chevL/）。 – raina77ow

您無法設置正確的屬性，然後爲左側屬性設置動畫，因爲jQuery不知道從何處開始動畫，因爲沒有左側屬性。設置一個初始的左側屬性，它的作品。 – adeneo

http://jsfiddle.net/adeneo/5GL5r/18/ – adeneo

動畫right屬性（因爲您已經嘗試過），然後設置left屬性可能適用於您。如果在動畫過程中調整窗口大小，我只會'破壞'，雖然在animatin完成後，所有內容都會再次顯示。

$(".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%; 
}

和左緣動畫0 ％使用javascript：

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

JSFiddle（我已經給它一個非常緩慢的速度，所以你可以嘗試調整框架）

來源

2014-03-30 17:52:54

這絕對是我希望div移動到的位置。但是如果有人旋轉手機或改變瀏覽器大小，它將會中斷。是否有一個更簡單的方法來完成這個？ –

@UncleSlug看我的編輯。 –

謝謝。此解決方案很好地工作，並使用最小的JavaScript。 –

jquery .animate使對象跳轉

回答

相關問題