Question

首先，我做了CODEPEN或jsfiddles

背景

好的我在几个标题标记span中有一个h1,h2,h3标记。在spantag里面是单词

体验 拼写如下：

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

问题

我不确定最好的方法来解决这个问题，但我想悬停：

正确重新拼写拼写经验
如果可能的话，在重新订购时将它们与另一个重叠动画

我不知道如何做到这一点，但我一直在想正则表达式，有阵列，但这感觉过于复杂，我真的对正则表达式和正确的数组排序一无所知。任何能够引导我朝着正确方向前进的信息都将非常受欢迎。或者对codepen或jsfiddles的修改会非常出色。

Answer 1

一种可能的解决方案是使用css来实现这一目标。此解决方案不会对过渡进行动画处理，只会更改字母的顺序。将此添加到您的CSS：

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

修改：感谢Marcel Gwerder指出it's not possible to animate the direction property

我发现this answer, in another post（它通过一个给定的文本字符串并将每个字符包装在一个范围内，然后为每个字符分配），这可能有助于jquery解决方案。

Answer 2

我刚刚尝试使用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）一起工作有点复杂。您也可以尝试存储位置，然后将它们相互滑动，但又复杂一点。

Answer 3

<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标签中写这个脚本......

如何在jquery中重新排序和动画文本？

3 个答案: