Ejemplo movilizando img con animate jQuery
En este ejemplo de jquery movilizaremos un imagen al darle click a un boton para lo cual deberemos utilizar la función animate de jquery.
aqui el ejemplo.
Ccodigo Juquery:
Jquery
aqui el ejemplo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>jQuery appletenhtml</title>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="container-fluid-">
<div class="row">
<div class="col-md-4 caja col-centrar">
<h3>Ejemplo utilizando Animate appletenhtml</h3>
<br>
<button class="btn brn-default ejecutar" id="boton">ejecutar</button>
<img src="imagen.jpg" alt="">
<img class="img3" src="imagen.jpg" alt="">
</div>
</div>
</div>
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/codigo.js"></script>
</body>
</html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>jQuery appletenhtml</title>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="container-fluid-">
<div class="row">
<div class="col-md-4 caja col-centrar">
<h3>Ejemplo utilizando Animate appletenhtml</h3>
<br>
<button class="btn brn-default ejecutar" id="boton">ejecutar</button>
<img src="imagen.jpg" alt="">
<img class="img3" src="imagen.jpg" alt="">
</div>
</div>
</div>
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/codigo.js"></script>
</body>
</html>
Ccodigo Juquery:
$(document).ready(function(){
//animacion en px y segundos
$('.ejecutar').click(function(){
//efectuando un top 100px por cada click que se le de al boton
$('img').animate({top:"+=100px"},1000)
});
//animacion en px y segundos
$('.ejecutar').click(function(){
//efectuando un top 100px por cada click que se le de al boton
$('img').animate({top:"+=100px"},1000)
});
Jquery
Comentarios
Publicar un comentario