使用jQuery .animate動畫從右一個div到左？

我有一個絕對定位在top: 0px和right: 0px的div，我想用jquery的.animate()將其從當前位置移動到left: 0px。如何做到這一點？我似乎無法得到這個工作：使用jQuery .animate動畫從右一個div到左？

$("#coolDiv").animate({"left":"0px"}, "slow");

爲什麼不這樣做，以及如何做到我期待做的？

謝謝！

來源

2010-06-15 Alex

我認爲它不工作的原因有事情做的事實，你有right位置集合，而不是left。

如果你手動設置left到當前位置，好像走：

活生生的例子：http://jsfiddle.net/XqqtN/

var left = $('#coolDiv').offset().left; // Get the calculated left position 

$("#coolDiv").css({left:left}) // Set the left to its calculated position 
      .animate({"left":"0px"}, "slow");

編輯：

顯示爲儘管Firefox的行爲如預期，因爲它的計算ED left位置可作爲以像素爲單位的正確值，而基於WebKit瀏覽器，顯然IE，用於左位置返回的auto的值。

因爲auto不是一個動畫起始位置，動畫有效地從0比0不是很有趣運行觀看。：O）

設置左位置的動畫之前手動如上修復該問題。

如果你不喜歡與混亂變量景觀，這裏有同樣的事情一個很好的版本，消除了對變量的需要：

$("#coolDiv").css('left', function(){ return $(this).offset().left; }) 
      .animate({"left":"0px"}, "slow");

來源

2010-06-15 02:11:22 user113716

在我閱讀jQuery源代碼http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js時，爲了確定位置，jQuery已經將元素位置標準化爲「top」和「在引擎蓋下留下「相對」 - 我相信你的回答是不正確的。例如，我的示例工作，儘管css值被設置爲正確的，並且動畫值被設置爲左側。 – artlung 2010-06-15 02:29:37

@artlung - 感謝您的鏈接，但是您在哪個瀏覽器中測試過？我正在Safari中測試，如果沒有設置左側位置，動畫將無法正常工作。它直接跳轉到左邊，可能是左邊的初始值是'auto'的結果。 – user113716 2010-06-15 02:39:47

在Firefox中測試過，效果很好。奇怪的是，Chrome和Safari的行爲如你所述。所以它正在做/改變/到正確的位置，但它沒有顯示臨時fx！添加jQueryUI（據推測允許動畫化正常jQuery不能做的其他事情）不會改變Chrome和Safari。 – artlung 2010-06-15 02:52:29

這裏有一個最小的答案，顯示你的榜樣工作：

<html> 
<head> 
<title>hello.world.animate()</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 
    type="text/javascript"></script> 
<style type="text/css"> 
#coolDiv { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 200px; 
    background-color: #ccc; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 
    // this way works fine for Firefox, but 
    // Chrome and Safari can't do it. 
    $("#coolDiv").animate({'left':0}, "slow"); 
    // So basically if you *start* with a right position 
    // then stick to animating to another right position 
    // to do that, get the window width minus the width of your div: 
$("#coolDiv").animate({'right':($('body').innerWidth()-$('#coolDiv').width())}, 'slow'); 
    // sorry that's so ugly! 
}); 
</script> 
</head> 
<body> 
    <div style="" id="coolDiv">HELLO</div> 
</body> 
</html>

原來的答案：

您有：

$("#coolDiv").animate({"left":"0px", "slow");

更正：

$("#coolDiv").animate({"left":"0px"}, "slow");

文檔：http://api.jquery.com/animate/

來源

2010-06-15 02:03:07 artlung

我真誠的道歉，但是這是一個簡單的複製/粘貼錯誤，不問題。 – Alex 2010-06-15 02:08:20

動畫'right'位置...有效的選擇。：o） – user113716 2010-06-15 03:12:50

所以.animate方法只有當你給的位置屬性的元素，如果沒有它不動？

例如我已經看到，如果我聲明div但我在css中沒有聲明任何東西，它不會假定他的默認位置並且它不會將其移動到頁面中，即使我聲明屬性邊距：x w y z;

來源

2013-03-15 10:34:37

這爲我工作

$("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow");

來源

2014-05-15 09:02:40

如果你知道你的動畫，你可以使用和動畫保證金偏移以及子元素的寬度。例如，這將左動畫：0到右：0

CSS：

.parent{ 
width:100%; 
position:relative; 
} 

#itemToMove{ 
position:absolute; 
width:150px; 
right:100%; 
margin-right:-150px; 
}

的Javascript：

$("#itemToMove").animate({ 
"margin-right": "0", 
"right": "0" 
}, 1000);

來源

2015-08-01 19:03:31 freeworlder

使用jQuery .animate動畫從右一個div到左？

回答

相關問題