What the Bug with flex slider; after event fires on hover when opacity of slides is animated?

457 views Asked by user31782 At 27 December 2016 at 14:20

I have been trying to animate opacity of slides in flex slider and observed that the after function gets executed on hover over slides. Here is the jsfiddle demo: https://jsfiddle.net/Lqwk6Lp2/

Pressing right arrow icon in bottom thumbnail slider and then hovering over any thumnail fires the after function of flex slider and even takes wrong value of slider.currentSlide. This can be seen in the console, as I have logged output on after event. Live demo again if jsfiddle goes down:

$('#carousel').flexslider({
  animation: "slide",
  controlNav: false,
  animationLoop: false,
  slideshow: false,
  itemWidth: 210,
  itemMargin: 5,
  asNavFor: '#slider',
  after: function(slider) {
    console.log("after carousel");
    console.log(slider.currentSlide);
    //flexLazy(undefined, $("#flex-carousel-H img")[slider.currentSlide]);
    //flexLazy(undefined, $("#flex-carousel-H img")[slider.currentSlide - 1]);
    //flexLazy(undefined, $("#flex-carousel-H img")[slider.currentSlide + 1]);
  }
});

$('#slider').flexslider({
  animation: "slide",
  controlNav: false,
  animationLoop: false,
  slideshow: false,
  sync: "#carousel",
  after: function(slider) {
    console.log("after slider");
    console.log(slider.currentSlide);

  }

});

#carousel img {
  opacity: .5;
  transition: opacity .5s ease-out;
}
#carousel img:hover {
  opacity: 1;
}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js"></script>

<!-- Place somewhere in the <body> of your page -->
<div id="slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>
<div id="carousel" class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>

The only thing that cause this bug is:

#carousel img {  
    opacity: .5;       
    transition: opacity .5s ease-out;  
}
#carousel img:hover {
    opacity: 1;
}

Question:

Why does the after event fire on hovering over any thumbnail when right arrow icon is pressed in thumbnail slider?
In Firefox dev tools all events assigned to an element are shown in ev black icon. When I click on it I see no mouseover, mouseout event registered. If no hover event exist then why does after function get executed on hover?
I am very much afraid that something's wrong with MSPointerUp event. But isn't that for Internet explorer only?

P.S: This is really an annoying bug. It took me a lot of time to pin down that opacity transition was causing this bug. I have a lot of lazy load stuff that depends upon after event :-(

Original Q&A

TechQA.

What the Bug with flex slider; after event fires on hover when opacity of slides is animated?

There are 0 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in FLEXSLIDER

Popular Questions

Popular Tags

Trending Questions