Whenever I visit my index.html page, a jQuery function runs to grab an article's supporting image and follow the mouse cursor within a defined area. However, after navigating to other pages and returning to index.html, this function fails to run unless I refresh the page. How can I resolve this issue?
Edit: It appears that the smoothstate function is causing the problem. Once I remove smoothstate from the equation, everything works as intended. HTML
<div id="main">
<p>Hover over titles</p>
<div class="content1">
<a><h2>Title 1 goes here </h2></a>
<img src="http://lorempixel.com/400/400/sports" alt="Image"/>
</div>
<div class="content2">
<a><h2>Title 2 goes here </h2></a>
<img src="http://lorempixel.com/300/300/people" alt="Image"/>
</div>
<div class="content2">
<a><h2>Title 3 goes here </h2></a>
<img src="http://lorempixel.com/200/300/technology" alt="Image"/>
</div>
</div>
jQuery
$(document).ready(function(){
$('h2').on('mouseenter mousemove', function(evt){
$(this).siblings('img').css({left: evt.pageX+30, top: evt.pageY-15}).show();
$(this).on('mouseleave', function(){
$(this).siblings('img').hide();
});
});
});
// Smoothstate
$(function(){
'use strict';
var $page = $('#main'),
options = {
debug: true,
prefetch: true,
cacheLength: 2,
forms: 'form',
onStart: {
duration: 250, // Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 1000,
render: function ($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},
smoothState = $page.smoothState(options).data('smoothState');
});