After creating an animation function that worked well with hovering over squares and leaving a trail, I later needed to add or remove squares based on the page size. Seeking help from here, I discovered my bind animation function wouldn't work on new divs.
Upon researching and trying different functions, I modified the code to look like this:
$(document).ready(function(){
$(document).on("webkitAnimationEnd mozAnimationEnd animationend", ".square", function(){
$(this).removeClass("squareAnim");
});
$(document).on("hover", ".square", function(){
$(this).addClass("squareAnim");
});
});
Unfortunately, the modified code is not functioning as expected. I am unsure if $(document).ready is redundant in this case, but even removing it does not solve the issue. What could be missing?
For reference, here is the link to the jsfiddle.