Override fade function on returning to initial slide, iDangero.us Swiper

Question

On this site the navigation menu on the left disappears when the gallery is activated. It reappears when the mouse hovers over a div covering the left 230px of the screen (#leftbar in the code snippet below). So far so good, but I want this effect to stop when the visitor goes back to the initial slide.

The index numbers are being returned from the iDangero.us Swiper, the slider Plugin I use. Now, when I navigate from slide 1 to 2 and back to 1, the menu reappears as intended, but it disappears when the mouse leaves the said divon the left side of the window, which should only happen on slides index #1 and greater.

For debugging purposes the slide index (coming from the plugin) is displayed in the title-tag. As the index is displayed correctly when navigating back and forth through the gallery I think plugin-related issues could be ruled out.

Here's the code:

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);
})

  }
}

Thanks for any suggestions!

Answer 1

If I understand correctly, then you need to use .off() several times as follows :

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);
        });
    }
}

For slide #0, any currently attached mouseenter/mouseleave handlers will be removed.

For slide #1, any currently attached mouseenter/mouseleave effect will be removed (to prevent an accumulation of effects) and fresh handlers will be attached.

Although you didn't ask for it, I have also included .stop(). This will stop dead any effect(s) that are currently running before initiating the desired effect. Without stop(), the desired animation will run after any current effect(s) finish. This is important to cater for a quick mouseenter-mouseleave sequence (or worse, eg. mouseenter-mouseleave-mouseenter-mouseleave-mouseenter-mouseleave).

Note also :

• use of .on(...) instead of .mouseenter() and .mouseleave() is optional. It's maybe slighly clearer to use .on() when also using .off()
• method chaining improves the efficiency of the code.