如何使用按钮单击平滑淡入淡出切换文本？答案

【问题标题】：How to smooth fade in-out for toggle text using button click?如何使用按钮单击平滑淡入淡出切换文本？
【发布时间】：2021-09-06 07:14:44
【问题描述】：

我有以下代码-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function toggleText(){
    if ($("#txt-1").css("display") != "none") {
        $("#txt-1").css("display", "none");
        $("#txt-2").css("display", "block");
        $("#txt-3").css("display", "none");
    } else if ($("#txt-2").css("display") != "none") {
        $("#txt-1").css("display", "none");
        $("#txt-2").css("display", "none");
        $("#txt-3").css("display", "block");
    } else {
        $("#txt-1").css("display", "block");
        $("#txt-2").css("display", "none");
        $("#txt-3").css("display", "none");
    }
};
</script>
</head>
<body>

<button onclick="toggleText()">Toggle</button>

<p id="txt-1">Hello</p>
<p id="txt-2" style="display: none;">How are you?</p>
<p id="txt-3" style="display: none;">See you soon!</p>

</body>
</html>

它在按钮单击时切换文本

我正在寻找的是在文本之间进行平滑过渡（可能是淡入淡出）。我不确定是写CSS 还是jQuery。

我尝试的是写一个CSS 类-

.smooth-fade {
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

并将此类名称smooth-fade 提供给所有h1 标签。它不起作用，执行此任务的最佳解决方法是什么？

【问题讨论】：

使用可见性和不透明度代替显示块来实现效果
你可以在css或jquery中完成，这里是jquery fadeOut api.jquery.com/fadeout jquery中还有一个fadeIn

标签： javascript html jquery css

【解决方案1】：

您可以为此使用 jquery：

  $( "#txt-1" ).fadeOut( "slow", function() {
     $("#txt-2").fadeIn();
  });

先淡出你想要的元素，然后使用回调函数淡入其他元素。

function toggleText(){
  $( "#txt-1" ).fadeOut( "slow", function() {
     $("#txt-2").fadeIn();
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button onclick="toggleText()">Toggle</button>

<p id="txt-1">Hello</p>
<p id="txt-2" style="display: none;">How are you?</p>

【讨论】：

【解决方案2】：

这是enter link description hereSeattle Ninja 解决方案的简化运行示例。

JS：

var slideSource = document.getElementById('slideSource');

document.getElementById('handle').onclick = function () {
  slideSource.classList.toggle('fade');
}

CSS：

#slideSource {
  opacity: 1;
  transition: opacity 1s; 
}

#slideSource.fade {
  opacity: 0;
}

HTML：

<button id="handle">Fade</button> 
<div id="slideSource">Whatever you want here - images or text</div>

【讨论】：

【解决方案3】：

你的代码有点乱。我会做一些更可重用的事情：

将所有内容包装在一个包装器中。
添加.active 类以了解可见内容。
使用nextOrFirst()自定义jquery函数

function toggleText() {
  var $active = $('.active');
  $active.removeClass('active').fadeOut(500, function() {
    $active.nextOrFirst().fadeIn().addClass('active');
  });
};

//Next or first function from https://stackoverflow.com/a/15959855/559079
$.fn.nextOrFirst = function(selector) {
  var next = this.next(selector);
  return (next.length) ? next : this.prevAll(selector).last();
};

$.fn.prevOrLast = function(selector) {
  var prev = this.prev(selector);
  return (prev.length) ? prev : this.nextAll(selector).last();
};

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
  </script>
</head>

<body>

  <button onclick="toggleText()">Toggle</button>

  <div class="wrapper">
    <p id="txt-1" class="active">Hello</p>
    <p id="txt-2" style="display: none;">How are you?</p>
    <p id="txt-3" style="display: none;">See you soon!</p>
  </div>

</body>

</html>

【讨论】：

【解决方案4】：

您的代码非常混乱.. 另外，当我们想使用 js 更改元素的样式时，最好使用 addClass 或 classList.add 方法，而不是简单的 style.background 东西...

看这个例子 =>

HTML

  <button onclick="toggleText()">Toggle</button>
  <p id="txt" class="fader">
    Hello
  </p>

CSS

.fader {
  opacity: 1;
  visibility: visible;
  transition: all  1s ease-in-out;
}
.fade-in {
  opacity: 0;
}

  let textArray = ["Hello", "How are you ? ", "See you soon ! "]
  let id = 1;
  const text = document.querySelector('#txt');
  
  function toggleText() {
    if (id > textArray.length - 1) {
      id = 0;
    }
    text.classList.add('fade-in');
    setTimeout(function () {
      text.innerText = textArray[id]
      text.classList.remove('fade-in')
      id++
    }, 1000)
  };

【讨论】：