Jquery懸停功能不能按預期工作

我希望讓用戶能夠查看我開發的網站的完整屏幕截圖，然後當他們將鼠標懸停在另一個div上時，會顯示一些元信息。Jquery懸停功能不能按預期工作

這裏是一個測試環節 - 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設置爲顯示：通過CSS

來源

2012-02-17 Dean Elliott

**注意：**也習慣在此發佈相關代碼。嘗試使用['fadeTo（）']（http://api.jquery.com/fadeTo/）而不是'fadeIn（）'和'fadeOut（）'我對它有更好的運氣。 FadeIn/Out與其他顯示/隱藏方法一起使用時會出現奇怪的現象。 – Chad 2012-02-17 14:38:20

你應該發佈相關的代碼 – derekaug 2012-02-17 14:38:21

沒有出於某種原因，你的fadeIn()是越來越適用於所有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')。所有你需要做的就是隱藏和顯示滑動重疊。

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

來源

2012-02-17 14:55:20 derekaug

完美的工作，謝謝。有什麼辦法可以阻止轉換過程中發生的白色「閃光」？ – 2012-02-17 14:58:04

請參閱編輯以擺脫「白色閃光燈」。讓我知道它是如何工作:) – derekaug 2012-02-17 15:07:44

完美。謝謝！ – 2012-02-17 15:12:58

Jquery懸停功能不能按預期工作

回答

相關問題