悬停图像上的jQuery改变不透明度/淡出和文本淡入

Question

对于 jQuery，我是一个完全的新手，我知道这个网站上有很多与我类似的问题，但我找不到与我想要的足够接近的问题。

我想要的是当鼠标悬停在图像上时，图像的不透明度会降低（或完全淡出），并且文本会淡入该图像所在的顶部。我还希望该文本成为同一页面上某个位置的链接（但我确信我可以做到这一点）。

如果有人可以为我在 jsfiddle 中组合一些东西，我将非常感激，因为我还没有足够的能力将 jQuery 现有示例修改为我需要的。

谢谢！

Answer 1

试试这个，也许对你有帮助：

HTML：

<img class="image" src="" alt="TestImage"></img><a id="link">This is the link content</a>

CSS：

 #link {
    display: none;
 }

脚本：

$(".image").hover(function(e) {
      e.preventDefault();
      $(this).fadeOut('slow', function(e) {
          $('#link').fadeIn('slow');
      });
});

 $("#link").mouseout(function(e) {
      e.preventDefault();
      $(this).fadeOut('slow', function(e) {
          $(".image").fadeIn('slow');
      });
});

$( document ).ready(function() {
    $(".image")[0].hover(); 
});

Fiddle

更新脚本：

$(".image").hover(function(e) {
      e.preventDefault();
      $(this).stop().fadeOut('slow', function(e) {
          $('#link').stop().fadeIn('slow');
      });
});

$("#link, .image").mouseout(function(e) {
      e.preventDefault();
      if($(this).is("img"))
      {
          $(".image").stop().fadeOut('slow', function(e) {
              $('#link').stop().fadeOut('slow', function(e) {
                  $(".image").stop().fadeIn('slow');
              });
          });
      }
      else
      {
          $('#link').stop().fadeOut('slow', function(e) {
              $(".image").stop().fadeIn('slow');
          });
      }
});

$( document ).ready(function() {
    $(".image")[0].hover(); 
});

Updated Fiddle