Textillate CSS动画无法完全与jQuery Mobile一起使用

Question

I have added a textillate effect to text on a second jquery mobile page. 我在第二个jquery移动页面上的文本上添加了textillate效果。 When I click on the page 2 button in the navbar, the animation works correctly when page 2 is displayed. 当我单击导航栏中的第2页按钮时，显示第2页时动画可以正常工作。 When I click on the page 1 button in the navbar followed by clicking on page 2 button, the text is displayed without animation. 当我单击导航栏中的第1页按钮，然后单击第2页按钮时，显示的文本没有动画。 I presume there is javascript code to re-initialize the effect but I am at a loss what it is. 我认为有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>

Answer 1

In Textillate documentation, it is not mentioned if you can reinitialize same text again. 在Textillate文档中，如果可以再次重新初始化相同的文本，则没有提及。 However, you can simply destroy it and then reinitialize it. 但是，您可以简单地销毁它然后重新初始化它。

To destroy it, you need to first save text in a var and then remove Textillate data stored into that target div by using .removeData() . 要销毁它，您需要先将文本保存在var ，然后使用.removeData()删除存储在目标div中的Textillate数据 。 And then replace all animated elements within target div with original text. 然后用原始文本替换目标div中的所有动画元素 。 You can use either pagecontainerbeforehide or pagecontainerhide to do the aforementioned steps. 您可以使用pagecontainerbeforehide或pagecontainerhide来执行上述步骤。

To reinitialize it, just call .textillate() on pagecontainerbeforeshow or pagecontainershow . 重新初始化它，只需调用.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 演示版

Textillate CSS动画无法完全与jQuery Mobile一起使用

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-11-10 22:45:16

Textillate CSS动画无法完全与jQuery Mobile一起使用

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-11-10 22:45:16

解决方案1
2 已采纳 2014-11-10 22:45:16