動畫與.animate（）jQuery的

我有一個標誌/頭在CSS動畫與.animate（）jQuery的

#logo2 {padding:43px 20px 0 20px; background:url(images/in_Store_Marketing.jpg) top right no-repeat;}

我試圖使用jQuery中.animate（），使徽標來自屏幕的右側和定居在屏幕的左側。使用上面的CSS，它將圖像設置在左側，它應該在動畫的結尾。

目前的jQuery看起來像這樣

$(document).ready(function(){ 
    $('#logo2').animate(
    { right: "+=95%" }, 3000); 
});

HTML看起來像這樣

<div id="logo2" style="height:70px">

它目前什麼都不做，沒有動畫...我缺少什麼？你如何使這個工作以這種方式做動畫？

來源

2011-03-28 FluxEngine

要正確格式化代碼，只需將其粘貼到文本編輯框中，然後單擊其上方工具行中的** {} **。 – Pointy 2011-03-28 14:04:50

檢查我的回答朋友 – Alex 2011-03-28 14:08:47

試試這個嗎？

.logo {padding: 35px 15 px 0 15 px; background:url(images/Logo.jpg) top right no-repeat;}

通知我改變左邊右

，改變JS來：

$(document).ready(function(){ $('#alex').animate({ right: "+=95%" }, 3000); });

我在的jsfiddle編碼類似的例子給你，check it out

更新：

試試我的更新，它採用了是絕對定位的圖像，這將使作爲背景圖像相同的效果：

http://jsfiddle.net/tub3c/

來源

2011-03-28 14:01:53 Alex

感謝您的快速回復，我嘗試了你說的，但它沒有奏效。我繼續更新了問題中的代碼，以包含您的建議修改，以及關於它爲什麼不起作用的任何想法？非常感謝你。 – FluxEngine 2011-03-28 14:32:20

檢查我更新的答案。它使用和絕對定位的圖像。 – Alex 2011-03-28 14:50:05

你的動畫「左」，但你真的需要動畫「背景 - 位置」。但是，因爲這不是jQuery可以直接進行動畫製作的基本屬性之一，所以可能還需要加載jQueryUI，甚至可能無法爲「background-position」設置動畫效果（問題在於它是一個奇怪的兩個被評估的財產）。

來源

2011-03-28 14:03:35 Pointy

我覺得左邊需要加引號：

$(".logo").animate({"left": "+=400px"}, 3000);

此外，動畫（）編輯的位置和你沒有任何位置設置而據我所知，這只是移動元素不是對象的元素。

如果你看看這個小提琴，我改變了你的css一點來添加定位，我把「logo」包裹在動畫應用到的div中。

希望這有助於。 http://jsfiddle.net/aMaaC/1/

來源

2011-03-28 14:07:31

嘗試過，它沒有工作。不過謝謝你的建議。 – FluxEngine 2011-03-28 14:23:07

此外，我分開你想要它從右到左。我更新了小提琴：http://jsfiddle.net/aMaaC/2/ 動畫代碼有點奇怪，有時你需要做左 - =使元素向左。我也將徽標浮在屏幕的右側。 – 2011-03-28 14:29:49

謝謝你的跟進，我確實讓它動畫。但是，它並沒有在div中正確設置，並且它在動畫時會「流血」並將其他圖像壓低。有什麼建議麼？ – FluxEngine 2011-03-28 14:55:31

對於像「top」或「left」這樣的放置屬性產生任何效果，元素「position」屬性必須設置爲除「static」之外的其他屬性（注意，除非另行定義，否則位置默認爲「static」這是造成OP問題的原因）。所以：絕對的，相對的，也許是固定的（對那個不積極）。此外 - jquery肯定會動畫「背景位置」，但只有一個參數，而不是兩個（「-30px」，而不是「-30px 10px」）。在jQ 1.4中，您可以爲這兩個部分製作動畫，但它已被固定爲1.5。可悲的是。

來源

2011-03-28 14:18:35 Bosworth99

動畫與.animate（）jQuery的

回答

相關問題