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
afterevent 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
evblack icon. When I click on it I see nomouseover,mouseoutevent registered. If no hover event exist then why doesafterfunction get executed on hover? - I am very much afraid that something's wrong with
MSPointerUpevent. 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 :-(