在JavaScript中切換文本

是否有更簡單的方法來切換2個或更多文本可見性？當我使用.toggle()方法時，文本會上下跳動，因爲它們同時被切換。與.fadeIn()和.fadeOut()它工作正常，但代碼是凌亂的。在JavaScript中切換文本

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>

來源

2015-04-26 Gabriel

如果你把代碼放到代碼片段中，可以直接在這個頁面上試試:) – ByteHamster

我不明白你想要什麼，但是對於'fadeIn'和'fadeout'你不需要設置' css（「display」，「none」）'。 –

嘗試像這樣 '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」）; }' –

試試這個辦法：

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

這樣你的郵件存儲到一個數組，只要你想，你可以添加儘可能多的冠軍。你的HTML中只有一個<h1>標籤。代碼變得更乾淨。

希望這會有所幫助！

來源

2015-04-26 10:21:55

謝謝Andrey，但現在在頁面加載時標題爲空。有沒有辦法解決這個問題？ – Gabriel

基於對@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>

來源

2015-04-26 10:20:13 ByteHamster

在JavaScript中切換文本

回答

相關問題