jQuery | Selector animado con ejemplo

El animado es un selector incorporado en jQuery que se usa para seleccionar el elemento que está animado actualmente.

Sintaxis:

$(:animated)

Valor devuelto: este selector devuelve el elemento que está animado actualmente.

El siguiente ejemplo ilustra el selector animado en jQuery:

Ejemplo:

<html>
    <head>
        <script src=
        "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
          
        <!-- jQuery code to show the working of this method -->
        <script>
            $(document).ready(function() {
                function aniDiv() {
                    $("#d3").animate({
                        height: "50%"
                    }, "slow");
                    $("#d3").animate({
                        height: "90%"
                    }, "slow", aniDiv);
                }
                aniDiv();
                $("#d3").click(function() {
                    $(":animated").css("background-color", "green");
                });
            });
        </script>
        <style>
            #d1, #d2, #d3 {
                padding: 10px;
            }
            #d1 {
                width: 100px;
                float: right;
                background: lightblue;
                margin-right: 80px;
                margin-left: 120px;
            }
            #d2 {
                width: 100px;
                float: right;
                margin-right: 100px;
                background: yellow;
            }
            #d3 {
                width: 100px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div>
            <!-- this div element will get selected -->
            <div id="d1" >This is 3.</div>
            <div id="d2" >This is 2.</div>
            <div id="d3" >This is 1.</div>
        </div>
    </body>
</html>                    

Salida:
antes de hacer clic en el elemento div (color rojo):

después de hacer clic en el elemento div y el color del div cambiará:

Publicación traducida automáticamente

Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *