使用javascript，jquery的圖片動畫

Question

我有幾個我想為其創建動畫的單詞，基本上每個單詞的幾個字母將與原始單詞分開，並使用這些字母生成一個新單詞。 舉例來說，假設我擁有Home一般服務，那么該動畫會從一般服務中獲取home gen的服務，並從服務中獲取ser來在原始的hgenser下創建另一個單詞。

jQuery或javascript是做到這一點的最佳選擇，還是使用Photoshop和創建動畫gif會更容易？

感謝您的輸入。

Answer 1

毫無疑問，使用jQuery。 它很簡單，是JavaScript。 您需要的功能是動畫，例如：通過ID名稱使用動畫功能移動div jQuery

Answer 2

這取決於您希望從中得到什么。 動畫gif的限制非常有限，您必須為每個所需的組合執行此操作，因為只要您的方法編寫正確，js只需基本的配置參數即可知道如何處理任何字符串。

為了將來起見，我絕對會建議一個jquery解決方案。 但是，如果您只針對一個單詞組合執行此操作，並且從不打算添加更多單詞，則js可能會過大。

您可以創建一個jsfiddle來玩，然后在遇到問題時優化此問題。

Answer 3

jQuery不是執行此類任務的第一件事，但是如果我要執行此操作，則步驟可能如下：

祝好運！

Answer 4

我還沒有機會玩它，但是拉斐爾也許值得研究？ 我聽說過有關此方面的好消息，其中一些演示非常流暢。

Answer 5

如果只做一次，那么用GIF制作起來可能會更快，如果用jQuery制作起來，那么它在存儲方面會更便宜，並且無限地靈活和高效。

假設您要使用jQuery：

您具有以下元素：

<span id="word">Home General Services</span>

使用jQuery獲取要更改的元素內的值。

var word = $("#word").html();

將元素拆分為單獨的字母，以便可以四處移動它們。

var letters = word.split("");
$("#word").html("");
for(var i = 0; i < letters.length; i++) {
    $("#word").append("<span>"+letters[i]+"</span>");
}

這將重新創建您以前使用過的單詞，將其拆分為組成字母。 這些可以通過訪問

$("#word").eq(index);

其中index是字母在原始單詞中的位置。

如果創建的函數可以從上方提供一個單詞和一個元素（例如#word），那么它可以檢查要創建的單詞是否可以由#word元素中的字母構成，然后可以為單獨的字母設置動畫隱藏或移動它們，取決於它們是否用在最終詞中。