2010-11-24 4 views
0

WordPressを使用してウェブサイトを設計していますので、別の要素がマウスオーバーしたときに特定の要素を表示/非表示するためにJQueryを使用します。 HTMLは、おおよそこの要素を隠したり再表示したときにJQueryの.fadeIn()レベルがオフになる

<div class="post" style="clear:both;"> 
    <a href="..."> 
     <img src="..." /> 
    </a> 
    <div class="autohide"> 
     <h3> 
      <a href="...">...</a> 
     </h3> 
     <p>....</p> 
    </div> 
</div> 
... 
<div class="spacer" /> 

のように見えるとjQueryは、次のようになりますが起こることになっているもの

jQuery(document).ready(function(){ 
    jQuery(".post .autohide").hide();` 
    jQuery(".post").hover(function() { 
     jQuery(this).nextAll(".spacer").first().stop().html(jQuery(this).children(".autohide") 
      .html()).fadeIn(); 
    },function() { 
     jQuery(this).nextAll(".spacer").stop().show().fadeOut().html("").hide(); 
    }); 
}); 

は、画像の上にユーザーマウスを置いたが、関連した自動非表示<div>の内容は、移植を受ける場合には、次のスペーサー<div>に入れてから退色させてください。マウスが外に出ると、自動的に<div>がフェードアウトして消去されます。

しかし、完全なフェードイン時間の間にポインタが画像上にない場合、マウスオーバーで効果が全く生成されない限り、スペーサーdivの最大不透明度は低下するようです。

これ以上のJQueryを知っている人なら、私はこのテーマについていくつかの光を当てることができれば大いに義務づけられます。私はそれが基本的な問題だと思う(私はこのプロジェクトの前にJQueryを使ったことがない)。

ありがとうございます。

答えて

1

私は.stop()コールを取り出しましたが、うまくいくように見えますが、まだ進行中のすべてを解析しようとしています。

http://jsfiddle.net/f3EJ3/

+0

ありがとう!これはうまくいくようです。正直言って、私はちょうど別のSOの話題から大部分のコードを取り除き、jQueryの文書を簡単に見てから修正しました。 – Actorclavilis

関連する問題