1

マウスで移動したときに、いくつかのテキスト bij を URL に置き換えて変更したいと考えています。アニメーション (CSS 用) を使用して変更できないことはわかっているため、フェードアウトを使用します。何時間も費やした後でも、なぜ機能しないのかわかりません。

また、ページの中央にある 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お早めに！

4

2 に答える 2

4

使用html方法:

$(this).html('<a href="Index.html">Continue</a>').fadeIn('slow');
于 2013-01-31T09:33:36.307 に答える
0

うーん、思ったほど簡単ではありません。

マウスを速く動かすと、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をダウンロードして含める必要があります。

デモ

$("#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');
    });
  }    
);
于 2013-01-31T10:00:56.900 に答える