pro 9

PHOTO EMBED

Wed Dec 18 2024 00:53:28 GMT+0000 (Coordinated Universal Time)

Saved by @akshva 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

        <script src="jquery-3.7.1.min.js"></script>
        <script src="jquery.animate-colors.js"></script>
    <title>jQuery</title>
   
</head>
<body>
    <h1> JQuery </h1>
    <h2>Append content to end of paragraph and list</h2>
    <button id="btnAppend">Append Demo</button>
    <p id="aboutjq"> jQuery dates back to 2005</p>
    <ul id="featuresjq">
        <li>HTML/DOM manipulation</li>
        <li> CSS manipulation</li>
    </ul>
    <script>
        $("#btnAppend").click(function(){
            $("#aboutjq").append("<br> The various features are: ");
            $("#featuresjq").append("<li>HTML manipulation</li>");
        });
        
    </script>
    <h2>Change the state of CSS style element  </h2>
    <button id="btnGrow">Animate Text - Increase Size</button>
    <button id="btnShrink">Animate Text - Decrease Size</button>
    <div id="animText">jQuery</div>
    <script>
        $("#btnGrow").click(function() {
            $("#animText").animate({
                "opacity":0.25,
                "fontSize":"+=4px"
        });
        });
        $("#btnShrink").click(function() {
            $("#animText").animate({
                "opacity":1,
                "fontSize":"-=4px"
        });
        });
    </script>
    <h2>Change the color of any div that is animated</h2>
    <input type="color" id="ipColor" />
    <button id="btnColor">Change color</button>
    <div id="foo" style="width:200px; height:150px; border:solid 1pt black;margin:10px;"></div>
    <script>
    $("#btnColor").click(function() {
        $("#foo").animate({ backgroundColor: $("#ipColor").val()},"slow" );
    });
    </script>
</body>
</html>
content_copyCOPY