Переключить текст на JavaScript

Question

Есть ли более простой способ переключить 2 или более видимость текста? Когда я использовал метод .toggle(), текст вскакивает вверх и вниз, потому что они одновременно переключаются. С .fadeIn() и .fadeOut() он работает правильно, но код грязный.

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

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

Answer 1

Попробуйте этот подход:

$('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);

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

 
<h1></h1>

Таким образом, вы храните ваши сообщения в единый массив, и вы можете добавить столько названий, как вы хотите , И у вас есть только один тег <h1> в вашем HTML. Код становится намного более чистым.

Надеюсь, это поможет!

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>