Text Übergang/Animation Onclick in JavaScript-Funktion und HTML

Ich habe eine Schaltfläche Auslösen dieser Funktion auf Klick:Text Übergang/Animation Onclick in JavaScript-Funktion und HTML

<button onclick="showAdvice()">Advice!</button> 
<p id="text"></p> 

<script> 
    function showAdvice() { 
     var advices = ["1","2","3"]; 
     var choose = Math.floor(Math.random() * advices.length); 
     document.getElementById("text").innerHTML = advices[choose]; 
    } 
</script>

Die onclick Aktion generiert Hinweise in "Text" Absatz, erscheinen sie in zufälliger Reihenfolge. Ich möchte, dass sie einen Übergang dazwischen haben - Opazität, Ausblenden/Einblenden. Wie kann ich dies in CSS/JavaScript erreichen?

Quelle

2016-03-21 Oletem

Sie können mit jquery Animationen erstellen.

function showAdvice() { 
    $("#text").hide(); 
    var advices = ["1", "2", "3"]; 
    var choose = Math.floor(Math.random() * advices.length); 
    document.getElementById("text").innerHTML = advices[choose]; 
    $("#text").fadeIn(); 
}

Beispiel: https://jsfiddle.net/90mxq8bf/

Quelle

2016-03-21 21:08:50

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
\t <style type="text/css" media="screen"> 
 
\t \t #pContainer { 
 
\t \t \t position: relative; 
 
\t \t \t overflow: hidden; 
 
\t \t \t width: 200px; 
 
\t \t \t height: 200px; 
 
\t \t } 
 
\t \t #pContainer > p { 
 
\t \t \t position: absolute; 
 
\t \t \t top: 0; 
 
\t \t \t left: 0; 
 
\t \t \t transition: opacity 0.5s linear; 
 
\t \t } 
 
\t \t #pContainer > p.show { 
 
\t \t \t opacity: 1; 
 
\t \t } 
 
\t \t #pContainer > p.hide { 
 
\t \t \t opacity: 0; 
 
\t \t } 
 
\t </style> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t <title></title> 
 
\t <link rel="stylesheet" href=""> 
 
</head> 
 
<body> 
 
\t <button onclick="showAdvice()">Advice!</button> 
 
\t <div id="pContainer"> 
 
    \t <p id="text" class="show"></p> 
 
    \t <p id="text02" class="hide"></p> 
 
\t </div> 
 

 
    <script> 
 
\t \t function showAdvice() { 
 
\t \t  var advices = ["1","2","3"]; 
 
\t   var choose = Math.floor(Math.random() * advices.length); 
 

 
\t   $('#pContainer p.hide') 
 
\t   \t .text(advices[choose]) 
 
\t   \t .removeClass('hide') 
 
\t   \t .addClass('show') 
 
\t   \t .siblings('p') 
 
\t   \t .removeClass('show') 
 
\t   \t .addClass('hide'); 
 
\t \t } 
 
\t </script> 
 
</body> 
 
</html>

Quelle

2016-03-21 21:20:53 tdjprog

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
\t <style type="text/css" media="screen"> 
 
\t \t #pContainer { 
 
\t \t \t position: relative; 
 
\t \t \t overflow: hidden; 
 
\t \t \t width: 200px; 
 
\t \t \t height: 100px; 
 
\t \t } 
 
\t \t #pContainer > p { 
 
\t \t \t position: absolute; 
 
\t \t \t top: 0; 
 
\t \t \t left: 0; 
 
\t \t \t /* transition: opacity 0.5s linear; */ 
 
\t \t } 
 
\t \t #pContainer > p.show { 
 
\t \t \t /* opacity: 1; */ 
 
\t \t \t opacity: 1; 
 
\t \t \t -webkit-animation: showP 0.85s linear; 
 
\t \t } 
 
\t \t #pContainer > p.hide { 
 
\t \t \t /* opacity: 0; */ 
 
\t \t \t opacity: 0; 
 
\t \t \t top: -50px; 
 
\t \t \t -webkit-animation: hideP 0.85s linear; 
 
\t \t } 
 
\t \t \t 
 
\t \t \t @-webkit-keyframes showP { 
 
\t \t \t \t 0%{ 
 
\t \t \t \t \t opacity: 0; 
 
\t \t \t \t \t top: -50px; 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t 100%{ 
 
\t \t \t \t \t opacity: 1; 
 
\t \t \t \t \t top: 0px 
 
\t \t \t \t } 
 
\t \t \t } 
 

 
\t \t \t @-webkit-keyframes hideP { 
 
\t \t \t \t 0%{ 
 
\t \t \t \t \t opacity: 1; 
 
\t \t \t \t \t top: 0px; 
 
\t \t \t \t } 
 
\t \t \t \t 80%{ 
 
\t \t \t \t \t opacity: 0; 
 
\t \t \t \t } 
 
\t \t \t \t 90%{ 
 
\t \t \t \t \t top: 105px; /* container height + 5*/ 
 
\t \t \t \t } 
 
\t \t \t \t 100%{ 
 
\t \t \t \t \t opacity: 0; 
 
\t \t \t \t \t top: -50px; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t </style> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t <title></title> 
 
\t <link rel="stylesheet" href=""> 
 
</head> 
 
<body> 
 
\t <button onclick="showAdvice()">Advice!</button> 
 
\t <div id="pContainer"> 
 
    \t <p id="text" class="show"></p> 
 
    \t <p id="text02" class="hide"></p> 
 
\t </div> 
 

 
    <script> 
 
\t \t function showAdvice() { 
 
\t \t  var advices = ["1","2","3"]; 
 
\t   var choose = Math.floor(Math.random() * advices.length); 
 

 
\t   $('#pContainer p.hide') 
 
\t   \t .text(advices[choose]) 
 
\t   \t .removeClass('hide') 
 
\t   \t .addClass('show') 
 
\t   \t .siblings('p') 
 
\t   \t .removeClass('show') 
 
\t   \t .addClass('hide'); 
 
\t \t } 
 
\t </script> 
 
</body> 
 
</html>

Quelle

2016-03-21 21:35:01 tdjprog

Text Übergang/Animation Onclick in JavaScript-Funktion und HTML

Antwort

Verwandte Themen