Blink on the background and color of the text

Question

Speak people, I have the following code to make a Blink effect in a div, I’m able to change the color of the background of the div from half to half a second, but I need to change the color of the text and I’m not able to find the logic for this change.

Follow the example of the current code

setInterval(function () {
    $(".laranja").css("background-color", function () {
        this.switch = !this.switch
        return this.switch ? "rgb(0, 0, 0, 0.3)" : ""
    });
}, 500)

I tried to do it like this and it worked

setInterval(function () {
        
        $(".laranja").css("background-color", function () {
            this.switch = !this.switch
            return this.switch ? "rgb(0, 0, 0, 0.3)" : ""
        });
        
        $(".laranja").css("color", function () {
            this.color = !this.color
            return this.color ? "#FFF" : ""
        });
        
        
    }, 500)

But I don’t know if it’s the cleanest and right way to go.

Answer 1

I don’t know if it’s the best way :

setInterval(function (){$(".laranja").css({function (){ 
    this.switch = !this.switch;
    this.color = !this.color;
    //Definir a cor do background
    bg=this.switch ?'black':''; 
    //Definir a cor do texto
    cor=this.color ?'#fff':'';  
    $(".laranja").css({backgroundColor:bg,color:cor});
}    
})},500);

setInterval(function (){$(".laranja").css({function (){ 
        this.switch = !this.switch;
        this.color = !this.color;
        //Definir a cor do background
        bg=this.switch ?'black':''; 
        //Definir a cor do texto
        cor=this.color ?'#fff':'';  
        $(".laranja").css({backgroundColor:bg,color:cor});
    }    
    })},500);

<div class="laranja">abc</div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>