jquery更改文本并将其替换为链接

Question

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

我还想要页面中心的整个 div，我尝试了 valign 等，但这也不起作用。这不是优先事项，但最好替换 margin-top

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

提前谢谢！

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');
    });
  }    
);