I'm trying to create a hover effect where an image moves around the page in a pattern (top left corner -> top right corner -> bottom right corner -> bottom left corner -> then back up to the top left corner).
To achieve this, I am adding and removing classes like hoverleft, right, down, up, etc. However, I'm facing an issue where the dynamically added classes are not recognized after the page loads. I've been attempting to use the .on() function but haven't had much success. I believe I may be overlooking something simple.
Here's my code in HTML and JS: you can also view it on jsfiddle here: http://jsfiddle.net/5w0nk6j9/4/
<div class="bodycontainer">
<div id="kim">
<div id="dance" class="dancingkim">
<div class="header">
<h2 class="introheader">Hover original</h2>
</div>
<img src="http://placehold.it/240x208" />
</div>
</div>
$('#kim').hover(function(){
$(".header h2").text("Hover text");
});
$('#kim').hover(function(){
$(".dancingkim").css("cursor", "pointer");
});
$('.dancingkim').hover(function(){
$(this).addClass("hoverleft");
$(this).removeClass("dancingkim");
});
$('#kim').on('hover', '.hoverleft', function() {
$('#dance').addClass("hoverdown");
$('#dance').removeClass("hoverleft");
});