帶有淡入淡出效果的HTML中的XML

我目前正在使用不同語言的不同文本的橫幅。橫幅必須是HTML（+ CSS）和JS/jQuery。我雖然關於爲多語言部分使用XML。帶有淡入淡出效果的HTML中的XML

這裏是我的html（一部分）：

<script type="text/javascript" language='javascript' src='./js/jquery-2.1.0.js'></script> 
<script type="text/javascript" language="javascript" src='./js/xmltranslation.js'></script> 
<script type="text/javascript" language='javascript' src='./js/jquery.lettering.js'></script> 
<script type="text/javascript" language='javascript' src='./js/jquery.textillate.js'></script> 
. 
. 
. 

<h1 id="title" class="tlt" data-in-effect="fadeInLeft"></h1>

我與XML文件解決方案，每jQuery的完成：

$(function() { 
var filename = location.pathname.substring(location.pathname.lastIndexOf("/") + 1); 
filename = filename.split(".")[0]; 
var language = 'de'; 
$.ajax({ 
    url: 'content.xml', 
    success: function(xml) { 
     $(xml).find(filename).each(function(){ 
      var id = $(this).attr('id'); 
      var text = $(this).find(language).text(); 
      $("#" + id).html(text); 
     }); 
    } 
});

}）;

到目前爲止效果很好。它在正確的容器上顯示正確的短語。

但我想使用jquery.textillate.js庫（https://github.com/jschr/textillate）中的「fadeInUp」等效果。

他們工作的偉大，如果我必須在標籤的文本：

<h1 id="title" class="tlt" data-in-effect="fadeInLeft">Test</h1>

的測試正在順利褪色英寸但由於XML解析，它不起作用。我認爲，XML解析是在頁面加載後完成的，而淡入效果發生在頁面呈現時。

有沒有人有更好的解決方案？我已經想過解析與jQuery或JS的XML，並把與

document.write

一個-Tag和輸出HTML部分之間的整個頁面，但因爲其他人在我的公司誰只有基本的HTML技能應與工作文件也，我寧願另一種解決方案。

還有人知道另一個淡入效果庫？

編輯：

我的解決方案（將在JQuery的XML解析）：

$("#" + id).html(text).hide().fadeIn(1000)

來源

2014-03-25 Södy

你可以嘗試使用this library。它在以前動態填充頁面時適用於我。你只需要隱藏元素直到頁面加載。所以一個簡單的方法可能是將元素不透明度設置爲0，然後使用setTimeout函數，然後將所需的類添加到元素。一個例子：

setTimeout(function(){ 
$('foo').addClass(animate fadeIn); 
},100);

來源

2014-03-25 15:53:54

嗨我試過了，但它不工作。它完美地增加了這個類，但仍然沒有效果。我實際上使用了相同的animate.css，jquery.textillate.js只是增加了另一個可能的標記來保持概覽。 –

帶有淡入淡出效果的HTML中的XML

回答

相關問題