10秒後刪除div

我一直在做很多研究，並試圖找到一種方法來刪除我的div。這是我的個人網站，我想有一個jQuery文本動畫，但10秒後，我希望它停止。我想通過刪除正在動畫的div可以做到這一點。看起來我有一些東西可以使它工作（一個函數並調用它），但它似乎不起作用。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>

來源

2017-08-26 KARINA POPOVICH

轉換你的代碼片段。什麼是'txt.textualizer'？（你可以點擊「Run code snippet」來查看錯誤信息 – Dekel

請擴展你的問題，正如@Dekekl提到的那樣，函數'textualizer'在哪裏？另外你在混合使用jQuery和native javascript。鏈接API。例如：'var fade = $（'＃fade'）;'。當你更新你的問題後，我會着手解決這個問題。 – lscmaro

請檢查下面的代碼，其中超時工作完全正常。請注意，您使用textualizer的方法不起作用，所以我爲此實現了另一種方法。我也用行$('#textlzr').textualizer('destroy');摧毀文本化器實例，然後刪除元素。

無法在SO片段工具片斷工作，請使用以下工作的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!'); 
}

來源

2017-08-26 18:11:56

我的理解，你必須設置寬度和高度爲div您將使用textualizer進行轉換。

僅供參考您在代碼片段中的代碼無法正常工作，因爲您忘記連接textualizer的腳本並且必須使用https。

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!'); 
 
}

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

<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>

來源

2017-08-26 18:35:56

回答

相關問題