jquery - fadeIn 用于单独 div 中的 html 悬停效果

Question

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

查询：

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