Member Avatar for Thevenin

Hi all I'm trying to have some jQuery movement on my HTML page.
I have a div that I want to move from right to left, and another one from left to right.
This is what I did:

#rectone {
	background: #0000FF;
	height: 10px;
	width: 100px;
	float:right;
	position: absolute;
        top: 0;
        right: 0;
        margin-top:5%;
}

#recttwo {
	background: #00FF00;
	height: 10px;
	width: 100px;
	float:left;
	position: absolute;
        top: 0;
        left: 0;
        margin-top:7%;
}

<script type="text/javascript"> 
$(document).ready(function(){
  $(".run").click(function(){
		var left = $('#rectone').offset().left;
		$("#rectone").css({left:left}).animate({"left":"0px"}, "slow");
	}); 
});
</script> 

<body>
<p><a href="#" class="run">Run</a></p> 
    <div id="rectone"></div>
</body>

This is the right to left movement, but I can't figure out how to move the other box from left to right.

Some hints?

  • 2 Contributors
  • 2 Replies
  • 186 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by Thevenin
Member Avatar for stbuchok

Should this not work?

var right = $('#rectone').offset().right;
$("#rectone").css({right:right}).animate({"right":"0px"}, "slow");
Member Avatar for Thevenin

Nope already tried.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.