Question

我一直在做很多研究，并试图找到一种方法来删除我的div。这是我的个人网站，我想要一个jquery文本动画，但在10秒后，我希望它停止。我认为最好的方法是删除正在设置动画的div。好像我有一些东西使它工作（一个函数并调用它），但它似乎不起作用。

function fadein() {
    var fade = document.getElementById('fade');
    fade.setAttribute("class", fade.getAttribute('class') + " loaded");
}
$(function() {
    var txt = $('#textlzr');
    txt.textualizer();
    txt.textualizer('start');
    setTimeout(stopText, 10000);
})

function stopText() {
    $("#textlzr").remove();
    console.log('I stopped!');
}

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<script src="https://code.jquery.com/jquery.min.js"></script>
<body onload="fadein()">
  <div id="fade">
    <div id="textlzr">
      <p> think outside the box </p>
      <p> </p>
    </div>
  </div>
</body>

Answer 1

请检查以下代码，其中超时工作完全正常。请注意，您使用文本化器的方法不起作用，因此我为此实现了另一种方法。我还使用行$('#textlzr').textualizer('destroy');销毁textualizer实例，然后删除元素。

无法使代码段工作在SO Snippet工具中，请使用以下工作JSFiddle作为参考

JSFiddle

<强>代码：

function fadein() {
  var fade = document.getElementById('fade');
  fade.setAttribute("class", fade.getAttribute('class') + " loaded");
}
$(function() {  
        var list = [ 'Think outside the box','Think inside the box'];
        var options = {
          duration: 1000,
          rearrangeDuration: 1000,
          effect: 'random',
          centered: true
        };
        var txt = $('#txtlzr');
        txt.textualizer(list, options); // textualize it!
        txt.textualizer('start'); // start
        setTimeout(stopText, 10000);
});
function stopText() {
  $('#txtlzr').textualizer('destroy');
  $("#txtlzr").remove();
  console.log('I stopped!');
}

Answer 2

据我所知，您必须为 div 设置宽度和高度，然后使用textualizer进行转换。

仅供参考我们在代码段中的代码无法正常工作，因为您忘记连接文本化程序的脚本而您必须使用https。

＆＃13;

function fadein() {
  $("#fade").attr("class",  $("#fade").attr('class') + " loaded");
}

$(function() {
  var txt = $('#textlzr'); 
  txt.textualizer();
  txt.textualizer('start');
  setTimeout(stopText, 10000);          
});

function stopText() {
  $("#textlzr").remove();
  console.log('I stopped!');
}

＆＃13;

#textlzr {
  font-size: 20px;
  width: 200px;
  height: 50px;
  margin-left: 100px;
  margin-top: 50px;
  border: 1px solid red;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://krisk.github.io/textualizer/assets/js/textualizer.min.js"></script> 
<body onload="fadein()">
  <div id="fade"> 
        <div id="textlzr">
          <p> think outside the box </p>
        </div>
    </div>  
</body>

＆＃13;

10秒后删除div

2 个答案: