Jqueryのホバー機能が意図したとおりに機能しない

Question

私が開発したウェブサイトのフルスクリーンショットをユーザーが表示できるようにしたい場合、別のdivがいくつかのメタ情報でフェードインします。あなたが見ることができるようにスライドショーの上にマウスを置く場合は、オーバーレイは大丈夫であるようだが、あなたはそれをオフ置いて、次のスライドが場に出たときにオーバーレイが表示され、http://www.deanelliott.me/misc/test-port/index.html

- ここ

は、テストリンクありそれはしてはいけません。

誰かが問題の内容を知っていれば、それは素晴らしいことでしょう。

おかげ

編集：ここでは

$(function(){ 
$('#slideshow').hover(
    function(){ 
      $('.slideimage').fadeOut(100, function(){ 
        $('.slideoverlay').fadeIn(100);            
      }); 
    }, 
    function(){ 
      $('.slideoverlay').fadeOut(100, function(){ 
        $('.slideimage').fadeIn(100);           
      }); 
    } 
    ); 
}); 

.slideoverlayは表示に設定され、関連するコードです：何らかの理由であなたのfadeIn()のためにCSS

Answer 1

経由どれもslideoverlaysのすべてに適用されなかっなっています​​は現在表示されているものにのみ適用されます。 fadeIn()とfadeOutは、あなたがホバリングしている実際のものにのみ影響を与えるようにしようとします。このようなもの：

$(function(){ 
    $('#slideshow .slide').hover(
     function(){ 
      var $this = $(this); 
      $this.find('.slideimage').fadeOut(100, function(){ 
       $this.find('.slideoverlay').fadeIn(100);            
      }); 
     }, 
     function(){ 
      var $this = $(this); 
      $this.find('.slideoverlay').fadeOut(100, function(){ 
       $this.find('.slideimage').fadeIn(100);           
      }); 
     } 
    ); 
}); 

おそらく最適化を使用できますが、これはうまくいくはずです。しかし、幸運をテストしていない。

白いフラッシュを取り除くためにこれを試してください。基本的には、上にオーバーレイをオーバーレイする場合は、$('.slideimage')を非表示にする必要はありません。あなたはslideoverlayを隠して表示するだけです。

$(function(){ 
    $('#slideshow .slide').hover(
     function(){ 
      var $this = $(this); 
      $this.find('.slideoverlay').fadeIn(100);            
     }, 
     function(){ 
      var $this = $(this); 
      $this.find('.slideoverlay').fadeOut(100); 
     } 
    ); 
});