Question

我正在使用jquery在悬停时交换文本，如下所示：

$("#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（）;但没有成功。有没有办法使用这个悬停交换并让它同时淡出？

Answer 1

您可以使用回调来实现所需的效果。

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

Answer 2

您可以使用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);
});

Answer 3

另一个解决方案，但与Joel Almeida非常相似。我试图更好地构建代码，因此更明显的是发生了什么。

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>

使用jquery .hover时淡出文本

3 个答案: