CODEWITHSUNDEEP
htmlanimation
Matt
Matt

Reputation: 105

How can I make an image move positions in HTML?

I know, I am crazy, considering I am literally just learning HTML. But I am attempting to design a website for my brother, and he REALLY wants this. Please be very directional with your responses. I am using this JQuery thing to fade in and out a picture, so maybe I can use a similar thing to do this?

By the way, I would like the image to slide to it's position, not just move in a flash.

Thanks!

Upvotes: 2

Views: 22377

Answers (1)

enloz
enloz

Reputation: 5854

JQuery .animate() is a way to go. Documentation and examples are provided on http://api.jquery.com/animate/

Here is a quick demo:

<!DOCTYPE html>
<html>
<head>
  <style>
div {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block"></div>

<script>
$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "slow");
});

$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});

</script>

</body>
</html>

Upvotes: 2

Related Questions