I have a <div id>
called anip , I invoke this on it <script>
and try to animate it, but the animation doesn't work. Like I said, it can be any animation, I just wish it would work.
In <head>
it I have added the binding link to jQuery. Inside <body>
I have a <div>
container with no style, and inside this container two <div>
, <header>
and corpo respectively. Inside the <div>
corpo I have the <div id="anip">
, which I want to animate in some way. I'm learning how to animate in jQuery. This is the approach.
<!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>
I would greatly appreciate the help. I am new to this community.
Hmmm it seems to me that that version of JQuery does not have the method
animate
I tried with another version and your code works fine, or in any case do not use the slim version ( slim ) since in general, it does not have ajax, there are no effects and they are eliminated outdated methods.I hope it works for you. Cheers ;)
Basically what changed was the first statement of the style of the div. So when it is animated it will move according to what is indicated.
Also modify the version of Jquery, which includes the
animate
.I hope it helps you.