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とネイティブなjavascriptを混在させています。 ex： 'var fade = $（ '＃fade'）;'。あなたの質問を更新した後、それに触れます。 – lscmaro

タイムアウトは完全に正常に動作し、以下のコードをご確認ください。テクスチャライザーを使用したメソッドが機能しなかったので、私はこれに対して別のメソッドを実装しました。私はまた、$('#textlzr').textualizer('destroy');という行のtextualizerインスタンスを破棄してから要素を削除しています。 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で変換されます。

FYI textizerのスクリプトを忘れて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

答えて

関連する問題