My slideshow has a hover function to pause it using .stop(true). Upon mouse exit, it should resume playing from where it left off. However, currently, when I hover over it, the animation stops and then continues until it reaches its target, pausing there as if waiting for the animation to complete. I'm unsure of what's causing this behavior.
Html:
<section class="photo-grid-slideshow">
<div class="photo-crop">
<h3>I wanna
<div class="xs-spacer"></div>
<a class="med-btn btn-white">Read more</a>
</h3>
<div class="photo-grid-container" style="background-image: url('Images and videos/odesza1.jpg');"></div>
</div>
<div class="photo-crop">
<h3>Dance
<div class="xs-spacer"></div>
<a class="med-btn btn-white">Read more</a>
</h3>
<div class="photo-grid-container" style="background-image: url('Images and videos/odesza3.jpg');"></div>
</div>
<div class="photo-crop">
<h3>With you
<div class="xs-spacer"></div>
<a class="med-btn btn-white">Read more</a>
</h3>
<div class="photo-grid-container" style="background-image: url('Images and videos/odesza2.png');"></div>
</div>
<div class="photo-crop">
<h3>With you
<div class="xs-spacer"></div>
<a class="med-btn btn-white">Read more</a>
</h3>
<div class="photo-grid-container" style="background-image: url('Images and videos/odesza4.jpg');"></div>
</div>
</section>
Css:
.photo-crop {
display: inline-block;
overflow: hidden;
float: left;
width: calc(100vw / 3);
height: 100%;
padding: 0;
position: relative;
background-position: center center;
background-size: cover;
text-align: left;
}
.photo-grid-slideshow {
height: 300px;
display: inline-block;
min-width: 300%;
position: relative;
background: black;
padding: none;
overflow: hidden;
background: #444;
margin-left: 0;
left: 0;
}
Script:
$(function(){
function animate(){
var p = $(".photo-grid-slideshow .photo-crop").css('width');
$(".photo-grid-slideshow .photo-crop:first-of-type").animate({marginLeft: '-=' + p}, 10000, "linear", function(){
$(this).css("margin-left", 0).appendTo('.photo-grid-slideshow');
animate(); // here we call it again
})
}
animate(); // start animation
})
$(".photo-grid-slideshow").mouseenter(function() {
$(".photo-grid-slideshow .photo-crop:first-of-type").stop().clearQueue();
})
$(".photo-grid-slideshow").mouseleave(function() {
$(function(){
function animate(){
var p = $(".photo-grid-slideshow .photo-crop").css('width');
$(".photo-grid-slideshow .photo-crop:first-of-type").animate({marginLeft: '-=' + p}, 10000, "linear", function(){
$(this).css("margin-left", 0).appendTo('.photo-grid-slideshow');
animate(); // here we call it again
})
}
animate(); // start animation
})
})