切換Jquery打字機效果

Question

我正在學習jQuery，並將其作爲一個實驗，試圖將隱藏/顯示切換效果與Jason Frame的打字機效果（http://onehackoranother.com/projects/jquery/jquery-grab-bag/text-effects.html）結合使用。

頁面上有鏈接，點擊時會顯示一個隱藏，並觸發類型效果。

這裏是jQuery代碼：

function toggleMe(a){ 
var e=document.getElementById(a); 
if(!e)return true; 
if(e.style.display=="none"){ 
e.style.display="inline-block" 
} 
else{ 
e.style.display="none" 
} 
return true; 
} 

(function($) {  

    $.fn.typewriter = function() { 
     this.each(function() { 
      var $ele = $(this), str = $ele.text(), progress = 0; 
      $ele.text(''); 
      var timer = setInterval(function() { 
       $ele.text(str.substring(0, progress++) + (progress & 1 ? '| ' : '')); 
       if (progress >= str.length) clearInterval(timer); 
      }, 100); 
     }); 
     return this; 
    }; 

})(jQuery); 

D鍵的HTML：

<p><a href="#" onclick="toggleMe('typewriter1'); $('#typewriter1').typewriter();">Lorem ipsum dolor sit amet</a><span id="typewriter1" style='display:none'>, consectetur adipiscing elit</span>. 
<a href="#" onclick="toggleMe('typewriter2'); $('#typewriter2').typewriter();">Pellentesque ut facilisis nulla.</a> 
<span id="typewriter2" style='display:none'>Mauris ultricies <a href="#" onclick="toggleMe('typewriter3'); $('#typewriter3').typewriter();">suscipit</a> <span id="typewriter3" style='display:none'>dolor</span> in ultrices.</span></p> 

顯然有幾件事錯了，我真的不能明白爲什麼。值得注意的是： 1）不顯示嵌套鏈接（打字機3）。看起來，HTML在一個隱藏的打字機範圍內被剝離。
2）跨度字符串的最後一個字符經常被忽略。

有關改進此代碼的任何建議嗎？

謝謝！

Answer 1

建議：不要混合使用jQuery和內聯onclick處理程序。對於所有事件處理使用jQuery非常簡單。您可以看到我如何將所有處理程序合併爲一個，並使用href來確定目標。

然後我開始從頭開始寫一個新版本的打字機。它使用contents()迭代和nodeType檢查來僅修改元素的實際文本部分。整個事情是遞歸的，所以它可以處理任何數量的嵌套元素。它還修復了代碼中的一些最終狀態錯誤（有時會將最後一個字符保留爲|）。

的jsfiddle：http://jsfiddle.net/TrueBlueAussie/vLtL8uqa/1/

jQuery.fn.typewriter = function() { 
    var recurse = function (node, delay) { 
     // Only convert text nodes 
     if (node.nodeType == 3) { 
      var str = node.textContent || ''; 
      node.textContent = ''; 
      var progress = 0; 
      // Initial timer to delay next descendant 
      setTimeout(function() { 
       // Repeat timer until complete 
       var timer = setInterval(function() { 
        var ss = str.substring(0, progress++) + (progress & 1 ? '_' : ''); 
        node.textContent = ss; 
        if (progress >= str.length) { 
         clearInterval(timer); 
         node.textContent = str; 
        } 
       }, 100); 
      }, delay * 100); 
      delay += str.length; 
     } else { 
      var $node = $(node); 
      if ($node.is(':visible')) { 
       $(node).contents().each(function (index) { 
        delay = recurse(this, delay); 
       }); 
      } 
     } 
     return delay; 
    } 
    this.each(function() { 
     // Start with the specified node with delay = 0 
     recurse(this, 0); 
    }); 
    return this; 
}; 

jQuery(function ($) { 
    $('.typewriter').click(function (e) { 
     var $target = $($(this).attr('href')); 
     $target.toggle().typewriter(); 
     return false; 
    }); 
}); 

開始定時逐漸延遲，使其看起來好像操作順序發生（當實際上它們全部並行啓動在同一框架上）。

感謝Jason Frame的想法，我保留至今的幾行代碼的 :)