CODEWITHSUNDEEP
javascriptjqueryhtmlarraysjquery-animate
John Abraham
John Abraham

Reputation: 18831

How to re-order and animate text in jquery?

Firstly, I've made a CODEPEN or jsfiddles

Background:

Ok I have a span tag within a few header tags h1,h2,h3. Inside that spantag is the word

experience which is spelled backwards like so:

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

Question

I'm unsure on the best way to approch this but I would like on hover:

I have no idea how to do this but I keep thinking regex, with arrays but this feels overly complicated and I really don't know anything about regex and proper array sorting. Any information to lead me in the right direction would be most appreciated. Or an edit to the codepen or jsfiddles would be so excellent.

Upvotes: 1

Views: 306

Answers (3)

Marcel Gwerder
Marcel Gwerder

Reputation: 8520

I've just tried to set up something animated with jquery, it's a bit tricky to get a fancy looking animation. But that one doesn't look too bad (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);
        });
    })();   
});

To get it working with hover(including mouseleave) is a bit more complicated. You could also try something with storing the position and then slide them over each other but again a bit more complicated.

Upvotes: 1

user1343227
user1343227

Reputation: 24

<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>

write this script in body tag...

Upvotes: 0

jvilhena
jvilhena

Reputation: 1131

One possible solution is to use css to accomplish this. This solution doesn't animate the transition, it just changes the order of the letters. Add this to your css:

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

Edit: Thanks to Marcel Gwerder for pointing out that it's not possible to animate the direction property

I found this answer, in another post (it goes through a given string of text and wraps each character in a span then assigns transiton styles to each), that may help with a jquery solution.

Upvotes: 3

Related Questions