1

まず、CODEPENまたはjsfiddlesを作成しました

バックグラウンド：

OK span、いくつかのヘッダー タグ内にタグがありますh1,h2,h3。そのスパンタグの中には単語があります

次のように逆向きにつづられた経験：

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

質問

これにアプローチする最善の方法はわかりませんが、ホバーしたいです：

  • 経験を正しく綴るために並べ替えます
  • 可能であれば、並べ替え中に別のものと重なるようにアニメーション化します

これを行う方法はわかりませんが、配列を使用して正規表現を考え続けていますが、これは非常に複雑に感じられ、正規表現と適切な配列の並べ替えについては何も知りません。私を正しい方向に導くための情報をいただければ幸いです。または、codepenまたはjsfiddlesの編集は非常に優れています。

4

3 に答える 3

3

考えられる解決策の 1 つは、css を使用してこれを実現することです。このソリューションはトランジションをアニメーション化せず、文字の順序を変更するだけです。これを css に追加します。

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

編集：方向プロパティをアニメーション化することはできないことを指摘してくれたMarcel Gwerderに感謝します

jquery ソリューションに役立つ可能性がある別の投稿 (テキストの特定の文字列を通過し、各文字をスパンでラップし、トランジション スタイルをそれぞれに割り当てる) で、この回答を見つけました。

于 2013-08-05T20:28:42.350 に答える
1

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);
        });
    })();   
});

ホバー（マウスリーブを含む）で動作させるには、もう少し複雑です。位置を保存して何かを試してから、それらを互いにスライドさせることもできますが、これも少し複雑です。

于 2013-08-05T22:20:17.270 に答える