7

Tengo un <div id> llamado anip, este lo invoco en el <script> e intento animarlo, pero no funciona la animación. Como he dicho, puede ser cualquier animación, solo deseo que funcione.

En el <head> he añadido el enlace vinculante a jQuery. Dentro del <body> tengo un <div> contenedor sin estilo, y dentro de este contenedor dos <div>, <header> y corpo respectivamente. Dentro del <div> corpo tengo el <div id="anip">, el cual quiero animar de alguna manera. Estoy aprendiendo a animar en jQuery. Este es el planteamiento.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>

	<title>Práctica 12</title>
	<style type="text/css">
		#header{
			padding: 10px;
			background-color: #2b82f7;
		}
		h1{
			padding: 10px;
		}
    #anip{
            padding:5px;
            background-color:"blue";
    }
	</style>
</head>
<body>
	<div id="contenedor">
		<div id="header"><h1>Título</h1></div>
		<div id="corpo">
			
			<div id="anip">
        Esto quiero que se anime
      </div>
     
		<script type="text/javascript">
			$('#anip').animate(
				 {
				    top : "+=50px",
				    opacity : 0.25
				 },
				    300,
			);
		</script>
				   
		</div>
	</div>
</body>
</html>

Agradecería mucho la ayuda. Soy nuevo en esta comunidad.

2
  • 1
    Hola y bienvenido a Stack Overflow. Si alguna de las respuestas solucionaron tu inquietud, te sugiero aceptarla con el check que hay bajo los votos. Te invito a hacer el recorrido para que conozcas la manera como funciona la comunidad.
    – DjCrazy
    Commented el 19 dic. 2019 a las 15:03
  • 1
    Gracias, entendido, estoy explorando y leyendo. Commented el 19 dic. 2019 a las 15:08

2 respuestas 2

8

Mmmmm me parece que esa versión de JQuery no tiene el método animate probé con otra versión y tu código funciona bien, o en todo caso no utilices la versión delgada (slim) ya que por lo general, no tiene ajax, no hay efectos y se eliminan los métodos obsoletos.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <!--<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
        <title>Práctica 12</title>
        <style type="text/css">
            #header{
                padding: 10px;
                background-color: #2b82f7;
            }
            h1{
                padding: 10px;
            }
        #anip{
                padding:5px;
                background-color:"blue";
        }
        </style>
    </head>
    <body>
        <div id="contenedor">
            <div id="header"><h1>Título</h1></div>
            <div id="corpo">
    
                <div id="anip">
            Esto quiero que se anime
          </div>
    
            <script type="text/javascript">
                $('#anip').animate({top : "+=50px", opacity : 0.25}, 300);
            </script>
    
            </div>
        </div>
    </body>
    </html>

Espero te funcione. Saludos ;)

1
  • Muchas gracias, me has aclarado el por qué no funcionaba mi código, entonces sería la versión de jQuery que estaba usando, tiene sentido. Gracias amigo, me ha funcionado. Commented el 19 dic. 2019 a las 14:50
3

Básicamente lo que cambie fue la instrucción primera del estilo del div. Así cuando se anime este se movera de acuerdo a lo que se indique.

También modifique la versión de Jquery, que incluye el método animate.

$('#anip').animate(
   {
      top : "+=150px",
      opacity : 0.25
   },
      "slow",
);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style type="text/css">
        #header{
            padding: 10px;
            background-color: #2b82f7;
        }
        h1{
            padding: 10px;
        }
    #anip{
            padding:5px;
            background-color:"blue";
            position: absolute;
            top: 0;
            right: 0;
            width: 150px;
            height: 50px;
    }
    
    </style>


    <div id="contenedor">
        <div id="header"><h1>Título</h1></div>
        <div id="corpo">

            <div id="anip">
        Esto quiero que se anime
      </div>

        </div>
    </div>

Espero te sirva.

1
  • Realmente gracias, me ha servido, funciona, noto que la versión de jquery que estaba utilizando puede ser la razón de por qué el código no funcionaba. Commented el 19 dic. 2019 a las 14:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.