CODEWITHSUNDEEP
javascripthtmljquerycss
Bane
Bane

Reputation: 49

Show active class

I want to add class 'active' to next div 1 second before first is removed.

Practically, I want to have an 'active' class on 2 elements at the same time for that 1 second.

Can someone help me?

Thanks

<div class="map-inner">
    <div class="map-location-outer">
        <div class="map-location-inner location1 active">
            <div class="map-location">
                <div class="map-icon">
                    <img src="i/content/map-icon2.svg">
                </div>
                <span class="map-pin"><span></span></span>
            </div><!-- map-location -->
        </div>
    </div>
    <div class="map-location-outer">
        <div class="map-location-inner location2">
            <div class="map-location">
                <div class="map-icon">
                    <img src="i/content/map-icon3.svg">
                </div>
                <span class="map-pin"><span></span></span>
            </div><!-- map-location -->
        </div>
    </div>
    <div class="map-location-outer">
        <div class="map-location-inner location3">
            <div class="map-location">
                <div class="map-icon">
                    <img src="i/content/map-icon1.png">
                </div>
                <span class="map-pin"><span></span></span>
            </div><!-- map-location -->
        </div>
    </div>
</div>


var x = 1;

function updateClass() {
    let a = $(".map-location-inner.active");
    a.removeClass("active");
    a = a.parent().next(".map-location-outer");
    if (a.length == 0)
        a = $(".map-location-outer").first();
    a.find(".map-location-inner").addClass("active");
}

setInterval(function () {
    updateClass();
}, x * 5500);

Upvotes: 0

Views: 133

Answers (1)

Ismail H Rana
Ismail H Rana

Reputation: 371

You can use setTimeout to wait before removing 1st .active class and add 2nd .active class before removing 1st one.

var x = 1;

function updateClass() {
    let a = $(".map-location-inner.active");
    let b = a.parent().next(".map-location-outer");
    if (b.length == 0)
        b = $(".map-location-outer").first();
    b.find(".map-location-inner").addClass("active");

    setTimeout(function() {
        a.removeClass("active");
    }, 1000);
}

setInterval(function () {
    updateClass();
}, x * 5500);

Upvotes: 2

Related Questions