jquery更改文本并用链接替换它

Question

我想用鼠标移动一些文本bij，用url替换它。 我知道你不能通过动画（用于css）来改变它，这就是我使用fadeout的原因。 花了几个小时后，我仍然无法弄清楚为什么它不起作用。

我也喜欢页面中心的整个div，我试过valign等，但这也不起作用。 这不是一个优先事项，但更换保证金顶部会很好

<div align="center" style="margin-top: 20%;"> 
  <div id="change">
    <p id="big">Welcome!</p>
  </div>
  <img src="pic.JPG" alt="Logo" width="40%" height="90"/>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("#change").hover(
function(){
    $(this).find('p').fadeOut('slow', function() {
          $(this).text('<a href="Index.html">Continue</a>').fadeIn('slow'); 
    });
}, 
function(){
    $(this).find('p').fadeOut('slow', function() {
          $(this).text('Welcome').fadeIn('slow'); 
    });    
});
</script>

THX提前！

Answer 1

使用html方法：

$(this).html('<a href="Index.html">Continue</a>').fadeIn('slow'); 

Answer 2

嗯，不像我想的那么容易。

快速移动鼠标时，很容易触发mouseenter / over mouseleave / out，这样：

<div align="center" style="margin-top: 20%;"> 
  <div id="change">
    <p id="big">Welcome!</p>
    <p id="link" style="display:none"><a href="Index.html">Continue</a></p>
  </div>
  <img src="pic.JPG" alt="Logo" width="40%" height="90"/>
</div>

运用

$(function() {
  $("#change").hover(function(){
    $("#big").fadeOut('slow',function() {
      $("#link").fadeIn('slow');
    });
  },
  function(){
    $("#link").fadeOut('slow',function() {
      $("#big").fadeIn('slow');
    });
  });
});

几乎可以工作。 但是由于进入/离开事件，您可能会在屏幕上看到这两个事件

但是，如果我们使用hoverIntent它可以工作 - 你需要首先下载并包含jquery.hoverIntent.minified.js

DEMO

$("#change").hoverIntent(function(){
    $("#big").fadeOut('slow',function() {
      $("#link").fadeIn('slow');
    });
  },
  function(){
    $("#link").fadeOut('slow',function() {
      $("#big").fadeIn('slow');
    });
  }    
);

或者如果你坚持改变html： DEMO

$("#change").hoverIntent(function(){
    $("#big").fadeOut('slow',function() {
      $("#big").html('<a href="Index.html">Continue</a>').fadeIn('slow');
    });
  },
  function(){
    $("#big").fadeOut('slow',function() {
      $("#big").html('Welcome').fadeIn('slow');
    });
  }    
);