Question

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

索引号是从我使用的滑块插件iDangero.us Swiper返回的。现在，当我从幻灯片1导航到2并返回到1时，菜单会按预期重新出现，但当鼠标离开窗口左侧的所述div时，它会消失，这应该只会发生在幻灯片索引上＃1和更高。

出于调试目的，幻灯片索引（来自插件）显示在title - 标记中。由于在浏览库中来回导航时正确显示索引，我认为可以排除与插件相关的问题。

以下是代码：

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()是可选的。在使用.on()

.off()

方法链提高了代码的效率。

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

1 个答案: