Question

我在第二个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>

Answer 1

在 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

Textillate CSS动画与jQuery Mobile不完全兼容

1 个答案: