我在第二个jquery移动页面上的文本上添加了textillate效果。当我单击导航栏中的第2页按钮时，显示第2页时动画可以正常工作。当我单击导航栏中的第1页按钮，然后单击第2页按钮时，显示的文本没有动画。我认为有JavaScript代码可以重新初始化效果，但是我不知所措。
<!DOCTYPE html>
<html>
<head>
<title>put title here</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="jquery.mobile-1.4.3.min.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>
<script type="text/javascript" src="jquery.textillate.js"></script>
<link rel="stylesheet" href="animate.min.css"/>
</head>
<body bgcolor="#ffffff">
<!-- Start of page-->
<div data-role="page" id="page1">
<div data-role="navbar" id="nbar3" data-iconpos="left">
<ul>
<li><a href="#page1" class="ui-btn-active">Page 1</a></li>
<li><a href="#page2">Page 2</a></li>
</ul>
</div> <!-- end of navbar -->
</div><!-- end of page -->
<!-- Start of page-->
<div data-role="page" id="page2">
<script type="text/javascript">
$('#page2').on('pagecreate', function() {
$('.anim0').textillate({
});
});
</script>
<div data-role="navbar" id="nbar4" data-iconpos="left">
<ul>
<li><a href="#page1">Page 1</a></li>
<li><a href="#page2" class="ui-btn-active">Page 2</a></li>
</ul>
</div> <!-- end of navbar -->
<div class="anim0" data-in-effect="fadeInLeftBig" style="font-family:Arial; font-size:34px; color:#000000; position:absolute; top:37px; left:196px;">hello</div>
</div><!-- end of page -->
</body>
</html>
最佳答案
在Textillate文档中，如果可以再次重新初始化相同的文本，则没有提及。但是，您可以简单地销毁它，然后重新初始化它。
要销毁它，您需要首先将文本保存在var中，然后使用.removeData()删除存储在该目标div中的Textillate数据。然后用原始文本替换目标div中的所有动画元素。您可以使用pagecontainerbeforehide或pagecontainerhide来执行上述步骤。
要重新初始化它，只需在.textillate()或pagecontainerbeforeshow上调用pagecontainershow。
$(document).on('pagecontainerbeforeshow', function (e, data) {
/* initialize */
$('.anim0', data.toPage).textillate();
}).on("pagecontainerhide", function (e, data) {
/* store text */
var text = $(".anim0 ul li", data.prevPage).text();
/* remove data and add original text back */
$(".anim0", data.prevPage).removeData().html(text);
});
Demo