I adapted an image rotation script from here.
I have a main page (main.php), and a button that will load a page (ajax.php) into a div container on main.php. The code for image rotation is placed inside $(document).ready(function() section of the ajax.php page. This code is below.
When the page first loads, it is okay and the images are rotating once every 1000ms. If I click the button to the load ajax.php to put in a new rotating set of images, it loads two images in succession, waits 1000ms, loads two images, etc. If I click a third time, it will load three images in succession, wait 1000ms, etc. Do you have an idea where the problem is occurring? Thanks.
Just an edit - if I put a comment inside the mouseleave function I see it will get called multiple times when the problem occurs, so it could be the .mouseleave(); code at the very end causing problems?
Edit2: I have added new code snippets. One from the main.php and two from the ajax.php page:
MAIN
<link rel="stylesheet" href="css/classic.css" type="text/css" />
<style>
#main-content {
width: 1000px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
margin: -300px 0 0 -380px;
}
</style>
</head>
<body>
<div>
<button id="main-button">Get Random Content</button>
</div>
<div style="clear: both"></div>
<div id="main-content"></div>
</script><script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script></script><script src="jquery.jeditable.js" type="text/javascript" charset="utf-8"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script><script src="jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#main-content").load("test1_slide.php");
$("#main-button").click(function() {
$("#main-content").load("test1_slide.php");
});
});
</script>
</body>
</html>
AJAX
<style>
#slide img {
position: absolute;
display: block;
}
#slide {
position: relative;
}
</style>
<?php
echo '<div id="slide">';
for ($i = 0; $i < 15; $i++) {
echo '<img src="http://placehold.it/350x150?text='.$i.'">';
}
echo '</div>';
?>
<script>
$(document).ready(function() {
var timer;
// adapted from http://jsfiddle.net/didierg/Cvxe2/
$("#slide > img:gt(0)").hide();
$("#slide")
.mouseenter(function() {
if (timer) {
clearInterval(timer);
}
})
.mouseleave(function() {
timer = setInterval(function() {
$("#slide > img:first")
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo("#slide");
console.log("test");
}, 1000);
})
.mouseleave();
});
</script>
