jQuery timeout change div

Question

I have a bunch of divs like so

<div class="listingImage">
    <div style="background-image:url('listings/listing1/1/image8Main.jpeg')"></div>
    <div style="background-image:url('listings/listing1/1/image2.jpeg')"></div>
    <div style="background-image:url('listings/listing1/1/image3.jpeg')"></div>
    <div style="background-image:url('listings/listing1/1/image4.jpeg')"></div>
    <div style="background-image:url('listings/listing1/1/image5.jpeg')"></div>
    <div style="background-image:url('listings/listing1/1/image6.jpeg')"></div>
    <div style="background-image:url('listings/listing1/1/image7.jpeg')"></div>
    <div style="background-image:url('listings/listing1/1/image9.jpeg')"></div>
</div>

With css:

.listingImage>div: {
    position:absolute;
    z-index:98;
    bottom:0;
    right:0;
    left:0;
    top:0;
    background:50% 50%/cover;
}
.listingImage>div.active {
    z-index:99;
}

I have a jQuery script to cycle through these divs and change the z-index to put one on top of all the rest.

<script>
    var timer
    $(".listingImage").on("mouseenter", function() {
        var element = $(this)
        timer = window.setTimeout(function() {
            if (element.children(".active").length) {
                element.children(".active").removeClass("active").next().addClass("active")
            } else {
                element.children().first().addClass("active")
            }
        }, 500)
    })
    $(".listingImage").on("mouseleave", function() {
        $(".active", this).removeClass("active")
        clearTimeout(timer)
    })
</script>

This script will go to next div and stop working. I believe I have two problems. It might have something to do with var element=$(this). Also, my mouseleave is being triggered by changes in z-index. How can I achieve cycling through divs and then returning to normal onmouseleave?

Task, on mouseenter, start cycle through boxes. On mouseleave, end cycle and restart. https://jsfiddle.net/sy5br7d0/

Answer 1

If you want to cycle through all the div's then u should use timer = window.setInterval rather than using window.setTimeout.

moidified script:

<script>
var timer
    $(".listingImage").on("mouseenter", function() {
        var element = $(this)
        timer = window.setInterval(function() {
            if (element.children(".active").length) {
                element.children(".active").removeClass("active").next().addClass("active")
            } else {
                element.children().first().addClass("active")
            }
        }, 500)
    })
    $(".listingImage").on("mouseleave", function() {
        $(".active", this).removeClass("active")
        clearTimeout(timer)
    })
</script>