JSFiddle - React, Tailwind, and code Playground

by ric47121

HTML

<!--p style="background: rgba(255, 0, 0, 0.5);"> 
    Bienvenido:
</p--> 

<p id="test1">holasss</p>
<br>
<input type="button" value="clickme.." id="my" />

JavaScript

//$("#test1").css({'background':'rgba(255, 0, 0, 1)'}).delay(250);
$("#my").click(function(){
  
//$("#test1").css({'background':'rgb(255, 0, 0)'})
//$("#test1").css({'filter':'alpha(opacity=10)'})


$("#test1").css({'background':'rgba(255, 0, 0, 1)'})
   
    $("#test1").animate({ 
        //width: "70%",
        opacity: 0.1,
        color: 'red'
        //background: 'rgba(255, 0, 0, .4)'
        //filter: 'alpha(opacity=50)'
        
        //"background-color": 'rgba(0, 0, 0, 0.6)'
        //marginLeft: "0.6in",
        //fontSize: "3em" 
        //borderWidth: "10px"
      }, 500 );


setTimeout(function(){
    $("#test1").css({'background':'rgba(255, 255, 255, 1)'});
    
      $("#test1").animate({ 
        //width: "70%",
        opacity: 1
        //background: 'rgba(255, 0, 0, .4)'
        //filter: 'alpha(opacity=50)'
        
        //"background-color": 'rgba(0, 0, 0, 0.6)'
        //marginLeft: "0.6in",
        //fontSize: "3em" 
        //borderWidth: "10px"
      }, 500 );

    
    },800);
    


    });