Question

我目前正在使用不同语言的不同文本制作横幅。横幅必须是HTML（+ CSS）和JS / jQuery。我想在多语言部分使用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);
        });
    }
});

}）;

到目前为止效果很好。它在正确的容器中显示正确的短语。

但我想使用＆＃34; fadeInUp＆＃34;等效果，可在jquery.textillate.js库中找到（https://github.com/jschr/textillate）。

如果标签中有文字，它们的效果很好：

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

测试顺利进行。但由于XML解析，它无法正常工作。我认为，XML解析是在页面加载后完成的，而Fade in effect是在页面渲染时发生的。

有人有更好的解决方案吗？我已经考虑过使用jQuery或JS解析XML并将整个页面放在-Tag之间并用

输出html部分

document.write

但由于我公司中只有基本html技能的其他人也应该使用这些文件，我宁愿选择另一种解决方案。

或者有人知道另一个淡入效果库吗？

编辑：

我的解决方案（添加JQuery XML解析）：

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

Answer 1

您可以尝试使用this library。在以前动态填充页面时，它对我有用。你只需要隐藏元素直到页面加载。因此，一种简单的方法可能是将元素不透明度设置为0，然后使用setTimeout函数，然后将所需的类添加到元素中。一个例子：

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

带有FadeIn-Effects的HTML格式的XML

1 个答案: