在javascript函数和HTML中单击文本转换/动画

Question

I have a button triggering this function on click: 我有一个按钮在点击时触发此功能：

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

The onclick action generates advices in "text" paragraph, they appear in random order. onclick动作在“text”段落中生成建议，它们以随机顺序出现。 I want them to have a transition in between - opacity, fade out/fade in. How can I achieve this in CSS/JavaScript? 我希望它们之间有一个过渡-不透明度，淡入/淡入。如何在CSS / JavaScript中实现呢？

Answer 1

You can use jquery to create animations. 您可以使用jquery创建动画。

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();
}

Example: https://jsfiddle.net/90mxq8bf/ 示例： https ： //jsfiddle.net/90mxq8bf/

Answer 2

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <!DOCTYPE html> <html> <style type="text/css" media="screen"> #pContainer { position: relative; overflow: hidden; width: 200px; height: 200px; } #pContainer > p { position: absolute; top: 0; left: 0; transition: opacity 0.5s linear; } #pContainer > p.show { opacity: 1; } #pContainer > p.hide { opacity: 0; } </style> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> </head> <body> <button onclick="showAdvice()">Advice!</button> <div id="pContainer"> <p id="text" class="show"></p> <p id="text02" class="hide"></p> </div> <script> function showAdvice() { var advices = ["1","2","3"]; var choose = Math.floor(Math.random() * advices.length); $('#pContainer p.hide') .text(advices[choose]) .removeClass('hide') .addClass('show') .siblings('p') .removeClass('show') .addClass('hide'); } </script> </body> </html>

Answer 3

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <style type="text/css" media="screen"> #pContainer { position: relative; overflow: hidden; width: 200px; height: 100px; } #pContainer > p { position: absolute; top: 0; left: 0; /* transition: opacity 0.5s linear; */ } #pContainer > p.show { /* opacity: 1; */ opacity: 1; -webkit-animation: showP 0.85s linear; } #pContainer > p.hide { /* opacity: 0; */ opacity: 0; top: -50px; -webkit-animation: hideP 0.85s linear; } @-webkit-keyframes showP { 0%{ opacity: 0; top: -50px; } 100%{ opacity: 1; top: 0px } } @-webkit-keyframes hideP { 0%{ opacity: 1; top: 0px; } 80%{ opacity: 0; } 90%{ top: 105px; /* container height + 5*/ } 100%{ opacity: 0; top: -50px; } } </style> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> </head> <body> <button onclick="showAdvice()">Advice!</button> <div id="pContainer"> <p id="text" class="show"></p> <p id="text02" class="hide"></p> </div> <script> function showAdvice() { var advices = ["1","2","3"]; var choose = Math.floor(Math.random() * advices.length); $('#pContainer p.hide') .text(advices[choose]) .removeClass('hide') .addClass('show') .siblings('p') .removeClass('show') .addClass('hide'); } </script> </body> </html>

在javascript函数和HTML中单击文本转换/动画

问题描述

3 个解决方案

解决方案1
0 2016-03-21 21:08:50

解决方案2
0 2016-03-21 21:20:53

解决方案3
0 2016-03-21 21:35:01

在javascript函数和HTML中单击文本转换/动画

问题描述

3 个解决方案

解决方案1 0 2016-03-21 21:08:50

解决方案2 0 2016-03-21 21:20:53

解决方案3 0 2016-03-21 21:35:01

解决方案1
0 2016-03-21 21:08:50

解决方案2
0 2016-03-21 21:20:53

解决方案3
0 2016-03-21 21:35:01