在返回初始幻灯片时重写淡出函数，iDangero.us Swiper

Question

在本站上，当库被激活时，左侧的导航菜单就会消失。当鼠标悬停在覆盖屏幕左边230 in的div (下面代码片段中的#leftbar)上时，它会重新出现。到目前为止还不错，但是当访问者回到最初的幻灯片时，我希望这个效果停止。

索引号是从我使用的滑块插件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，任何当前附加的鼠标/鼠标保存处理程序都将被删除。

对于幻灯片#1，任何当前附加的鼠标/鼠标保存效果将被删除(以防止效果的积累)，并将附加新的处理程序。

虽然你没有要求，但我也包括了.stop()。这将停止当前正在运行的任何效果，然后再启动所需的效果。如果没有stop()，所需的动画将在任何当前效果完成后运行。这是重要的，以迎合一个快速的鼠标-鼠标保存序列(或更糟，例如。mouseenter-mouseleave-mouseenter-mouseleave-mouseenter-mouseleave).

另请注意：

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