淡入 html 悬停效果在单独的 div 中

Question

我在JQUERY中有一个html函数，它导致文本在链接悬停时出现在右侧。 我很好奇这个文本是否可以淡入或类似的东西，所以它不是一个如此苛刻的过渡。 任何帮助将不胜感激。

Jquery：

<script type="text/javascript">
$(document).ready(function() {
$("#changeText").hover(function() {
$("#navhover").html("HOME");
}
,function(){
$("#navhover").html("")
});
});
</script>

HTML：（如果需要，我可以显示完整的字符串）

         <div class="nav"><a href="index.html" id="changeText">HOME</a></div>
         <p id="navhover"></p>

网站：

www.monkbuns.com

Answer 1

在文本中淡出。

$（"#navHover"）.hide（）.html（"Home"）.fadeIn（）;

并淡出

$（"#navHover"）.fadeOut（function（）{ $（this）.html（"）; }）;

Answer 2

工作演示

试试这个

$(document).ready(function () {
    $("#navhover").hide();
    $("#changeText").hover(function () {
        $("#navhover").html("HOME").fadeIn("slow");
    }, function () {
        $("#navhover").fadeOut("slow");
    });
});

希望这有帮助，谢谢

Answer 3

你能试试这个吗，

  $(document).ready(function() {
     $("#changeText").hover(function() {        
        $( "#navhover" ).hide().html("HOME").fadeIn( "slow", function() {
           // Animation complete
        });
    }
    ,function(){
       $("#navhover").html("")
    });
  });

演示：http://jsfiddle.net/GxJGs/