如何重新排序和動畫jQuery中的文本？

首先，我做了一個CODEPEN或jsfiddles如何重新排序和動畫jQuery中的文本？

背景：

好吧，我有幾個標題標籤h1,h2,h3內的span標籤。裏面那個spantag這個詞

經驗這倒拼，像這樣：

<h3>for <span class="hover-spell">ecneirepxe</span>.</h3>

問題

我的最佳途徑不確定要計算策略，但我會喜歡懸停：

重新排序爲拼寫專家正確ience
如果可能的話它們的動畫重疊另一個而重新排序

我不知道如何做到這一點，但我一直在想正則表達式，使用數組但這種感覺過於複雜，我真不」瞭解有關正則表達式和正確數組排序的任何信息。任何信息引導我在正確的方向將是最感謝。或者編輯codepen或jsfiddles會非常出色。

來源

2013-08-05 Matthew Harwood

我能想到的任何東西都是將每個字母包裝在一個容器中，以便您可以操縱他們的位置。在JS中從字符串中獲取字母實際上很簡單 - 因爲字符串是數組 - 只是執行'var theString ='ASD'; console.log（theString [2]）'你會得到'S'。字符串中的字母數在'theString.length'中。 –

一個可能的解決方案是使用CSS來實現這一點。此解決方案不會爲過渡設置動畫，只會改變字母的順序。添加到您的CSS：

.hover-spell:hover{ 
    direction: rtl; 
    unicode-bidi: bidi-override; 
}

編輯：感謝馬塞爾Gwerder用於指出it's not possible to animate the direction property

我發現this answer, in another post（它通過文本的特定字符串，幷包裝在一個跨度的每個字符，然後分配transiton樣式到每個），這可能有助於jQuery解決方案。

來源

2013-08-05 20:28:42 jvilhena

加上一個聰明，但該死的任何想法如何得到這個動畫？ –

@MatthewHarwood你不會用這個CSS解決方案獲得動畫效果，因爲[無法爲方向屬性設置動畫效果]（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties） –

<span id = "spell">olleh</span> //hello in reverse 

<script type="text/javascript"> 
     var newText; 
     var text = null; 
     text = document.getElementById("spell").innerHTML; 
     for (var i = text.length - 1; i >= 0; i--) { 




      if (i == text.length - 1) { 
       newText = text.substr(i, 1); 
      } 
      else { 
       newText = newText + text.substr(i, 1); 
      } 
     } 
     alert(newText); 
    </script>

寫這個劇本在body標籤...

來源

2013-08-05 21:48:28 user1343227

我只是試圖建立一些與jQuery的動畫，這是一個有點棘手的一個奇特看動畫。但那個看起來不錯（DEMO）。

var expElem = $(".hover-spell"); 
var exp = expElem.text(); 
var run = false; 

expElem.empty(); 
for(var i = 0; i <= exp.length; i++) { 
    expElem.append('<span>'+exp.charAt(i)+'</span>'); 
} 

expElem.mouseover(function() { 
    if(run === true) return false; 
    run = true; 
    var stepDuration = 300; 
    var counter = 0; 

    (function anim(){ 
     if(counter == exp.length -1) return false; //Remove -1 to get last "e" animated 
     counter++; 

     var nth = exp.length; 
     var elem = $('span:nth-child('+nth+')', expElem); 

     elem.slideUp(stepDuration, function() { 
      (function() { 
       if(counter == 1) return elem.prependTo(expElem); 
       else return elem.insertAfter($('span:nth-child('+(counter-1)+')', expElem)); 
      })().slideDown(stepDuration, anim); 
     }); 
    })(); 
});

爲了使它與懸停（包括mouseleave）一起工作有點複雜。你也可以嘗試一下存儲位置，然後將它們滑過對方，但又有點複雜。

來源

2013-08-05 22:20:17

如何重新排序和動畫jQuery中的文本？

回答

相關問題