Exploring the capabilities of animate.css and jQuery within a bootstrap environment has been quite interesting for me. However, I've encountered a major issue!
I am attempting to trigger animations on mouseenter / mouseleave, which led me to create a series of complex chained callbacks that are now causing me frustration.
Take a look at my jQuery code (using no-conflict mode due to other plugins):
jQuery(document).ready(function () {
var animationend = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
var imgRotacion = "animated rotateOut";
var h3Bounce = "animated bounceIn";
var pFlip = "animated flipInX";
var imgRotacionOff = "animated rotateIn";
var h3BounceOff = "animated bounceOut";
var pFlipOff = "animated flipOutX";
jQuery(".procaption").on("mouseenter", function () {
jQuery(this).find("img").addClass(imgRotacion).one(animationend, function () {
jQuery(this).hide();
jQuery(this).parent().find("h3").removeClass("hidden").addClass(h3Bounce).one(animationend, function () {
jQuery(this).parent().find("p").removeClass("hidden").addClass(pFlip);
});
});
});
jQuery(".procaption").on("mouseleave", function () {
jQuery(this).find("p").removeClass().addClass(pFlipOff).one(animationend, function () {
jQuery(this).removeClass().addClass("hidden");
jQuery(this).parent().find("h3").removeClass().addClass(h3BounceOff).one(animationend, function () {
jQuery(this).removeClass().addClass("hidden");
jQuery(this).parent().find("img").removeClass(imgRotacion).show().addClass(imgRotacionOff);
});
});
});
});
The HTML structure is fairly simple:
<div class="procaption wow fadeInLeft well text-center">
<img src="holder.js/150x150" alt="150x150" class="img-responsive img-circle center-block">
<h3 class="hidden">This is a title</h3>
<p class="hidden">But this is a description!</p>
</div>
The desired behavior: My goal is to sequence all the animations so they appear and disappear in a specific order upon mouseenter and mouseleave events.
Currently, it seems to be "working", but only when the mouseleave event is triggered after the last animation of the mouseenter event has completed.
When I attempt to quickly do a mouseenter followed by a mouseleave, the
<p>But this is a description!</p><img>... This should not occur!
Here's the link to the jsFiddle.
I believe there must be a simpler solution, but as I'm still learning and practicing, any guidance or suggestions would be greatly appreciated!
Just to mention, I attempted changing the .procaption class to .procaptioning during the animation until the final callback completes, but it didn't work :(
I also tried using
$(".procaptioning").on("mouseenter mouseleave", function() { return false; })