Javascript help cannot move sideways

JavaScript
1

Hellow everyone.
I have a question. I wish to move my picture sideways with JavaScript jquery. For now i have been able only to move it down and right with the animate function but how do i move it parallel (down and right together in one move)?
Thank you very much

2

Hi there. :slight_smile:

You’ll have to show us what you’ve tried already. Use these guidelines for posting: http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics

3

HI,

If you mean diagonal I believe you need something like this:


$("#elementName").animate({left: '+=200', top: '+=200'}, 1000);

Here’s a demo with a css version also.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#test, #test2 {
	width:200px;
	height:100px;
	background:red;
	text-align:center;
	line-height:100px;
	position:absolute;
	left:0;
	top:250px;
}
#test2 {
	position:static;
	-webkit-transition:1s all ease;
	-moz-transition:1s all ease;
	-ms-transition:1s all ease;
	transition:1s all ease;
}
.hover:hover + #test2 {
	-webkit-transform:translate(200px, 200px);
	-moz-transform:translate(200px, 200px);
	-ms-transform:translate(200px, 200px);
	transform:translate(200px, 200px);
}
.hover {
	width:100px;
	padding:5px;
	background:#f9f9f9;
	margin:0 0 10px;
	border:1px solid #000;
}
</style>
</head>

<body>
<div class="hover">Hover ME</div>
<div id="test2">CSS Testing</div>
<div id="test">Jquery Testing</div>
</body>
<script>
$("#test").animate({left: '+=200', top: '+=200'}, 1000);
</script>
</html>
4