ejemplo de animar contenido HTML con JQuery

ejemplo de animar contenido HTML con JQuery

ejemplo de animar contenido HTML con JQuery

ejemplo de animar contenido HTML con JQuery

en el siguiente ejemplo aprendes como animar contenido HTML utilizando jQuery y modificando la propiedad left de un div.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#texto").animate({left: '250px'});
});
});
</script>
</head>
<body>

<button>Mueveme</button>

<div id="texto" style="position:absolute;">videotutoriales.es</div>
<body>
</html>

como puedes ver en el código tenemos definido un div identificado como texto y un botón

muy importante tiene modificada la propiedad Position de CSS en absoluto para poder moverlo

en la parte de arriba hacemos una referencia a la librería de jQuery y en el método ready del documento preparamos el evento Click del botón para que al ser pulsado nueva el DIV que tenemos identificado como texto utilizando el método animate de jQuery

y entre paréntesis indicamos que propiedad queremos cambiar, en este caso la posición de la izquierda qué será 250