0

私は jQuery に関しては完全な初心者であり、このサイトには私のような質問がたくさんあることを知っていますが、私が望むものに十分近いものを見つけることができませんでした。

私が望むのは、マウスが画像の上に置かれたとき、画像の不透明度が減少し（または完全にフェードアウトし）、その画像があった場所の上にテキストがフェードインすることです。また、そのテキストを同じページの位置へのリンクにしたいと思います（ただし、それを管理できると確信しています）。

誰かが私のためにjsfiddleで何かをまとめることができれば、それは非常に高く評価されます.

ありがとう！

4

1 に答える 1

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

フィドル

更新されたスクリプト:

$(".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(); 
});

更新されたフィドル

于 2013-07-31T10:01:15.460 に答える