<!Doctype html>
<html>
<head>
<script src="query.min.js"></script>
<script>
$("document").ready(function(){
$("#move").click(function(){
$("#image").animate({left: "+=500"}, 2000);
});
$("#move2").click(function(){
$("#image").animate({left: "-=500"}, 2000);
});
});
</script>
</head>
<body>
<button id="move" > move right </button>
<button id="move2" > move LEFT </button>
<br />
</br />
<img id="image" src="Tulips.jpg" width ="400" height="400" style="position:absolute" />
</body>
</html>
instructions :
1. download latest jQuery library and save in a folder
2. rename the jQuery file to query.min.js
3. copy paste the codes in notepad and save in the same folder with .html extention
output
<html>
<head>
<script src="query.min.js"></script>
<script>
$("document").ready(function(){
$("#move").click(function(){
$("#image").animate({left: "+=500"}, 2000);
});
$("#move2").click(function(){
$("#image").animate({left: "-=500"}, 2000);
});
});
</script>
</head>
<body>
<button id="move" > move right </button>
<button id="move2" > move LEFT </button>
<br />
</br />
<img id="image" src="Tulips.jpg" width ="400" height="400" style="position:absolute" />
</body>
</html>
instructions :
1. download latest jQuery library and save in a folder
2. rename the jQuery file to query.min.js
3. copy paste the codes in notepad and save in the same folder with .html extention
output
