在返回到初始幻燈片時覆蓋淡入淡出功能，iDangero.us Swiper

Question

在this site當激活圖庫時，左側的導航菜單消失。當鼠標懸停在覆蓋屏幕左側230像素的div（下面的代碼片段中的#leftbar）時，它會再次出現。到目前爲止這麼好，但是當訪問者回到最初的幻燈片時，我希望這種效果停止。

索引編號從我使用的滑塊插件iDangero.us Swiper返回。 現在，當我從幻燈片1導航到2並返回到1時，菜單將按照預期再次出現，但當鼠標離開窗口左側的所述div時，它將消失，這應該只發生在幻燈片index＃1和更大。

爲了調試目的，幻燈片索引（來自插件）顯示在title-tag中。由於索引在畫廊中來回瀏覽時正確顯示，我認爲可以排除與插件相關的問題。

下面的代碼：

function slidefader(){ 
    var slideindex = mySwiper.activeIndex; 
    $('title').html(slideindex); 
    // First slide 
    if (slideindex == 0) { 
    $('.fade').clearQueue(); 
    $('.fade').delay(600).fadeIn(200); 
    $('.fade2').fadeOut(100); 
    } 

    // Other slides 
    if (slideindex >= 1) { 
    $('.fade').clearQueue(); 
    $('.fade').fadeOut(200); 
    $('.fade2').fadeIn(); 


$('#leftbar').mouseenter(function(){ 
    $('.fade').fadeIn(200); 
}) 
    $('#leftbar').mouseleave(function(){ 
    $('.fade').fadeOut(200); 
}) 

    } 
} 

感謝您的任何建議！

Answer 1

如果我理解正確的話，那麼你就需要使用.off()幾次如下：

function slidefader(){ 
    var slideindex = mySwiper.activeIndex; 
    $('title').html(slideindex); 
    // First slide 
    if (slideindex == 0) { 
     $('.fade').clearQueue().delay(600).fadeIn(200); 
     $('.fade2').fadeOut(100); 

     $('#leftbar').off('mouseenter').off('mouseleave'); 
    } 

    // Other slides 
    if (slideindex >= 1) { 
     $('.fade').clearQueue().fadeOut(200); 
     $('.fade2').fadeIn(); 

     $('#leftbar').off('mouseenter').on('mouseenter', function() { 
      $('.fade').stop().fadeIn(200); 
     }).off('mouseleave').on('mouseleave', function(){ 
      $('.fade').stop().fadeOut(200); 
     }); 
    } 
} 

對於幻燈片＃0，任何當前連接的mouseenter /鼠標離開處理程序將被刪除。

對於幻燈片＃1，任何當前附加的mouseenter/mouseleave效果將被刪除（以防止效果累積）並附加新鮮處理程序。

雖然你沒有要求，我還包括.stop()。這將在啓動所需效果之前停止當前正在運行的任何效果。如果沒有stop()，所需的動畫將在任何當前效果完成後運行。這對於迎合快速老鼠 - 老鼠葉片序列（或更糟，例如，mouseenter-mouseleave-mouseenter-mouseleave-mouseenter-mouseleave）來說是重要的。

還要注意：

• 使用.on(...)代替.mouseenter()和.mouseleave()是可選的。在使用.on()時也許會更加清晰.off()
• 方法鏈提高了代碼的效率。