在需要展示多條宣傳語、標語輪播、動態標題等場景下，Morphext 是一款極具性價比的解決方案。它基於 Animate.css 動畫庫，體積極小（~2KB gzipped）、零依賴（僅需 jQuery）、跨瀏覽器兼容，支持自定義動畫類型、分隔符、輪播間隔，且提供優雅的降級策略。本文詳細講解安裝配置、參數詳解、進階用法、常見問題及最佳實踐。
<!-- jQuery (建議 1.7+ / 2.x / 3.x) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- Animate.css (動畫效果核心) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css" />
<!-- Morphext 核心文件 -->
<script src="path/to/morphext.min.js"></script>
<link rel="stylesheet" href="path/to/morphext.css" />將輪播文本用容器包裹，句子間用分隔符（默認逗號）分隔：
<div id="js-rotating">
I am a So Simple, Very Doge, Much Wow, Such Cool Text Rotator
</div>提示：若句子包含逗號，可通過 separator 參數自定義分隔符（如 |）。
<script>
$(document).ready(function() {
$("#js-rotating").Morphext();
});
</script>| 參數 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| animation | String | 'bounceIn' | Animate.css 動畫類名（如 fadeIn、flipInX、rotateIn、zoomIn 等），查看完整列表 |
| separator | String | ',' | 句子分隔符，建議使用不常見字符（如 |、;;;）避免衝突 |
| speed | Integer | 2000 | 輪播間隔（毫秒），建議 ≥ 2000 保證閱讀時間 |
| complete | Function | $.noop | 每次動畫完成後的回調，參數為當前顯示的句子索引 |
$("#js-rotating").Morphext({
animation: 'fadeIn', // 覆蓋默認 bounceIn
separator: '|', // 使用 | 分隔
speed: 3000, // 3 秒切換一次
complete: function(index) {
console.log('第 ' + (index + 1) + ' 句顯示完畢');
}
});對應 HTML：
<div id="js-rotating">So Simple | Very Doge | Much Wow | Such Cool</div>Animate.css 默認動畫時長 1s。若需調整，通過 CSS 覆蓋目標元素：
#js-rotating {
/* 覆蓋 Animate.css 的 1s 默認時長 */
-webkit-animation-duration: 3s;
animation-duration: 3s;
}或針對特定動畫類：
.animated.fadeIn {
animation-duration: 1.5s;
}現象：部分動畫（bounceInUp、bounceInDown 等）導致元素超出父容器邊界。
原因：Animate.css 動畫位移超出容器高度，非插件 Bug。
解決：父容器添加 overflow: hidden;：
.rotating-container {
overflow: hidden;
height: 1.5em; /* 固定高度防止佈局抖動 */
}現象：無 JS 環境下，插件不執行，文本靜態顯示第一句（或全部）。
方案：提供 CSS-only 降級（首句可見），或使用 <noscript> 提示：
<noscript><style>#js-rotating { opacity: 1; }</style></noscript>現象：IE9 及以下、舊版 Android WebView 無動畫，直接硬切換文本。
方案：使用 Modernizr 特性檢測，提供 JS 降級動畫（如 jQuery .fadeIn()/.fadeOut()）：
if (!Modernizr.cssanimations) {
// 手動實現淡入淡出輪播邏輯
setInterval(function() {
$('#js-rotating span:visible').fadeOut(500, function() {
$(this).next('span').length ? $(this).next().fadeIn(500) : $('#js-rotating span:first').fadeIn(500);
});
}, 3000);
};(function($) {
$.fn.Morphext = function(options) {
var settings = $.extend({
animation: 'bounceIn',
separator: ',',
speed: 2000,
complete: $.noop
}, options);
return this.each(function() {
var $this = $(this),
phrases = $this.text().split(settings.separator),
$phrases = $.map(phrases, function(p) {
return $('').text($.trim(p)).hide();
}),
index = 0;
$this.empty().append($phrases);
$phrases[0].show().addClass(settings.animation);
setInterval(function() {
$phrases.eq(index).removeClass(settings.animation).hide();
index = (index + 1) % $phrases.length;
$phrases.eq(index).show().addClass(settings.animation);
settings.complete(index);
}, settings.speed);
});
};
})(jQuery);核心機制：文本分割 → 創建 span 陣列 → 循環切換 animated + animationClass 類名觸發 CSS 動畫。
fadeIn/zoomIn，活潑風用 bounceIn/flipInX，嚴肅風用 slideInDown。aria-live="polite"，輔助閱讀器感知內容變化。Morphext 以「小而美」的設計哲學，解決了文字輪播動畫的通用需求。它將動畫複雜度委託給成熟的 Animate.css，自身專注於調度邏輯，是典型的「做一件事，做到極致」的微型庫。對於現代項目，若已使用 Vue/React，建議直接使用對應生態組件（如 vue-text-rotator、react-text-loop）獲得更好的組合式開發體驗；但在 jQuery 體系存量項目中，Morphext 仍是不二之選。