我使用jquery交換懸停文字，如下所示時：淡出文本使用jQuery .hover
$("#bottomMiddle").hover(function(){
$("#rightHeading").text("CMS heading");
$("#rightContent").text("CMS content");
},function(){
$("#rightHeading").text("This is the original heading");
$("#rightContent").text("This is the original content");
});
這工作，但效果是苛刻，想消失文本和退出，我有嘗試使用.fadeIn（）;但沒有成功。有什麼辦法可以使用這個懸停交換並讓它在同一時間消失？
您可以使用回調來達到預期的效果。
此執行.text()呼叫時，.fadeOut()完成後，就在.fadeIn()：
$("#bottomMiddle").hover(function(){
$("#rightHeading").fadeOut(function() {
$(this).text("Hello").fadeIn();
});
$("#rightContent").fadeOut(function() {
$(this).text("World").fadeIn();
});
},function(){
$("#rightHeading").fadeOut(function() {
$(this).text("This is the original content").fadeIn();
});
$("#rightContent").fadeOut(function() {
$(this).text("This is the original content").fadeIn();
});
});button {
width: 300px;
height: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="bottomMiddle">Button</button>
<div id="rightHeading">This is the original heading</div>
<div id="rightContent">This is the original content</div>找到效果非常好 - 謝謝！ – TJ15
您可以使用jQuery的動畫很容易做到這一點。檢查this jsfiddle。
您的代碼可能看起來是這樣的：
$("#bottomMiddle").hover(function(){
$("#rightHeading").hide().text("CMS heading").fadeIn(200);
$("#rightContent").hide().text("CMS content").fadeIn(200);
},function(){
$("#rightHeading").hide().text("This is the original heading").fadeIn(200);
$("#rightContent").hide().text("This is the original content").fadeIn(200);
});
這個答案是有效的，但@Joel Almeida的答案顯示瞭如何使用回調，所以是最好的答案。 – kosmos
另一種解決方案，但真正類似喬爾阿爾梅達。我試圖更好地構建代碼，所以更明顯的是發生了什麼。
var heading = $("#rightHeading")
var content = $("#rightContent")
var both = heading.add(content)
var animDuration = 300 // ms
var transition = function(headingText, contentText) {
both.fadeOut(animDuration, function() {
heading.text(headingText)
content.text(contentText)
both.fadeIn(animDuration)
})
}
$("#bottomMiddle").hover(
function() {
transition('CMS heading', 'CMS content')
},
function() {
transition('This is the original heading', 'This is the original content')
}
)<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bottomMiddle">HOVER</div><br />
<div id="rightHeading">This is the original heading</div>
<div id="rightContent">This is the original content</div>
當你改變你不能淡出/文本本身。你應該嘗試在使用CSS3躍遷或jQuery的動畫這一點。 – TheFrozenOne
你可以從http://daneden.github.io/animate.css/ – ketan