マウスオーバーでテキストを変える方法

Question

私はこのことがどうやって行われたかを考えてみてください。 私はそれがjQueryの

http://www.marieforleo.com/

が左上隅にロゴ/テキストを参照してください...あなたはそれをマウスオーバー時に使用しています知っているすべては、それが背中のサイト名への移行と、デフォルトでランダムなテキストを示していマウスを出す。

これはどのように行われましたか？

ありがとうございます。

Answer 1

こちらがお役に立てば幸いです。それはまったく同じではありませんが、まだ...あなたはまだいくつかの機能を改善することができますし、コードの再利便性に取り組むこともできます。

(function($) { 
 

 
    var logo = $("#logo"), 
 
    originalText = logo.html(), 
 
    altLogoTextArray = ["make it count.", "make peace.", "make art not war.", "make something out of yourself."], 
 
    chosenText, 
 
    timeOut = null; 
 

 
    function animateText(text, startFrom, length, delay) { 
 
    var strlen = text.length; 
 
    if (startFrom + length > strlen) { 
 
     return; 
 
    } 
 
    timeOut = window.setTimeout(function() { 
 
     logo.html(text.substr(0, startFrom) + text.substr(startFrom, length)); 
 
     //testText.html(startFrom + length); 
 
     animateText(text, startFrom, length + 1, delay); 
 
    }, delay); 
 
    } 
 

 
    function getRandomTextFromArray(arr) { 
 
    var arrLength = arr.length, 
 
     randInt = Math.floor(Math.random() * (arrLength - 0)) + 0; 
 
    return arr[randInt]; 
 
    } 
 

 
    logo.on('mouseenter mouseleave', function(e) { 
 
    window.clearTimeout(timeOut); 
 
    if (e.type == "mouseenter") { 
 
     chosenText = getRandomTextFromArray(altLogoTextArray); 
 
     animateText(chosenText, 3, 0, 20); 
 
    } else if (e.type == "mouseleave") { 
 
     animateText(originalText, 3, 0, 20); 
 
    } 
 
    }); 
 

 
})(window.jQuery);

#logo { 
 
    font-size: 30px; 
 
    min-width: 500px; 
 
    display: inline-block; 
 
    zoom: 1; 
 
    cursor: pointer; 
 
} 
 

 
#logo:after { 
 
    content:""; 
 
    display:block; 
 
    height:1px; 
 
    width:22px; 
 
    background:#000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span id="logo">marie forleo.</span>