Question

是否有更简单的方法来切换2个或更多文本可见性？当我使用.toggle()方法时，文本会上下跳动，因为它们会同时切换。 .fadeIn()和.fadeOut()工作正常，但代码很乱。

＆＃13;

var triggerTitle = function() {
  var hasClassHide = $(".hero-title.1").hasClass("hide");

  if (hasClassHide) {
    $(".hero-title.1").removeClass("hide");
    $(".hero-title.1").fadeIn(1000);
    $(".hero-title.2").addClass("hide");
    $(".hero-title.2").fadeOut(1000);
    $(".hero-title.2").css("display", "none");
  } else {
    $(".hero-title.2").removeClass("hide");
    $(".hero-title.2").fadeIn(1000);
    $(".hero-title.1").addClass("hide");
    $(".hero-title.1").fadeOut(1000);
    $(".hero-title.1").css("display", "none");
  }
};

setInterval(triggerTitle, 3000);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 class="hero-title 1">WEB DEVELOPER</h1>
<h1 class="hero-title 2 hide" style="display: none;">WEB DESIGNER</h1>

＆＃13;

Answer 1

尝试这种方法：

＆＃13;

$('h1').hide();

var titles = ['web developer', 'web designer'];
var index = -1;
var triggerTitle = function() {
  $('h1').fadeOut();
  setTimeout(function() {
    $('h1').text(titles[index].toUpperCase());
    $('h1').fadeIn();
  }, 1000);
  index = (index < titles.length - 1) ? index + 1 : 0;
  console.log(index);
};

setInterval(triggerTitle, 3000);

＆＃13;

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

＆＃13;

这样您就可以将消息存储到单个阵列中，并且可以根据需要添加任意数量的标题。而且您的HTML中只有一个<h1>标记。代码变得更加清晰。

希望这有帮助！

Answer 2

根据@A.J.的评论，我添加了一些CSS。现在看起来真的很好。

var triggerTitle = function() {
  var hasClassHide = $(".hero-title.1").hasClass("hide");

  if (hasClassHide) { 
    $(".hero-title.1").removeClass("hide"); 
    $(".hero-title.2").fadeOut(1000); 
    $(".hero-title.1").fadeIn(1000); 
    $(".hero-title.2").addClass("hide"); 
  } else { 
    $(".hero-title.2").removeClass("hide"); 
    $(".hero-title.1").fadeOut(1000); 
    $(".hero-title.2").fadeIn(1000); 
    $(".hero-title.1").addClass("hide"); }
};

setInterval(triggerTitle, 3000);

h1 {
    position: absolute;
    width: 80%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 class="hero-title 1">WEB DEVELOPER</h1>
<h1 class="hero-title 2 hide" style="display: none;">WEB DESIGNER</h1>

在JavaScript中切换文本

2 个答案: