返回初始幻灯片时覆盖淡入淡出功能，iDangero.us Swiper

Question

在this site 上，当图库启动时，左侧的导航菜单会消失。当鼠标悬停在覆盖屏幕左侧 230px 的 div 上时，它会重新出现（#leftbar 在下面的代码 sn-p 中）。到目前为止一切都很好，但我希望当访问者返回到初始幻灯片时停止这种效果。

索引号是从我使用的滑块插件 iDangero.us Swiper 返回的。 现在，当我从幻灯片 1 导航到 2 并返回到 1 时，菜单会按预期重新出现，但是当鼠标离开窗口左侧的上述 div 时它会消失，这应该只发生在幻灯片索引 #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/mouseleave 处理程序都将被删除。

对于幻灯片 #1，任何当前附加的 mouseenter/mouseleave 效果都将被移除（以防止效果累积）并附加新的处理程序。

虽然不是你要的，我也加了.stop()。这将在启动所需效果之前停止当前正在运行的任何效果。如果没有stop()，所需的动画将在任何当前效果完成后运行。这对于满足快速 mouseenter-mouseleave 序列（或更糟，例如 mouseenter-mouseleave-mouseenter-mouseleave-mouseenter-mouseleave）非常重要。

另请注意：

• 使用.on(...) 代替.mouseenter() 和.mouseleave() 是可选的。在同时使用 .off() 时使用 .on() 可能会更清楚一些
• 方法链接提高了代码的效率。