jquery x, y coordinate

[ggalan]

saw a few posts regarding this but nothing seemed to work for me.

say i want a simple condition when an element reaches a x value > 400, how can i make this work?

$(".block").animate({"left": "450px"}, "slow");
	if ($('.block').offset().left > 400){// this part and
          $(".block").animate({"left": 0}, 1000);// this part needs help
	}

[ggalan]

i found this
http://www.davidcramer.net/code/84/g...avascript.html

but not sure how to implement it, i dont see an area to reference my div element

[ggalan]

anyone?

[jscheuer1]

As far as I can tell, that link just tells you how to get the x, y info cross browser if you're not using jQuery. That information is also available elsewhere around the web. But you already have a more convenient method available via jQuery and are using it correctly, just either not in the right place and/or perhaps without taking into account the width of the object.

The code:

1. Animates at a slow pace all elements with class block.
   
   
2. Without necessarily waiting for the animation to complete checks the left offset of the left edge of the first element with class block.
   
   
3. If that edge is beyond 400, animates all block class elements back to 0

As currently written, I believe the second animation(s) would, if required by the if condition, have to wait until the first animation(s) completed, at least for each element selected.

So you probably don't even want to use animate in this fashion. Look at the second method for animate on the man page:

http://api.jquery.com/animate/

.animate( properties, options )

properties A map of CSS properties that the animation will move toward.

options A map of additional options to pass to the method. Supported keys:
duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
complete: A function to call once the animation is complete.
step: A function to be called after each step of the animation.
queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.
specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).

This allows you to specify the options as an object which includes a step property. I'm thinking something like so:

$('.block').animate({left: 450}, {duration: 'slow', step: function(){
	var b = $(this);
	if(b.offset().left > 400){
		b.stop().animate({left: 0}, 1000);
	}
}});

May need some tweaking. The stop() function takes two parameters:

.stop( [ clearQueue ], [ jumpToEnd ] )

clearQueue A Boolean indicating whether to remove queued animation as well. Defaults to false.

jumpToEnd A Boolean indicating whether to complete the current animation immediately. Defaults to false.

One or the other or both of these may need to be set to true, example with both true:

		b.stop(true, true).animate({left: 0}, 1000);

You may want/need (particularly if more than one element is being animated and these vary in width) to add the width of the element in the calculation:

	if(b.offset().left + b.width(true) > 400){

Other refinements are possible. It's tough to say without actually seeing a demo of what you're trying to do and having a precise explanation of what exactly it's not doing that you want it to.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[ggalan]

thanks for your help, making some progress. this seems to create the div once animation is complete

$(".block").animate({
  "left": 500
  }, 1000, function() {
      $(this).after('<div>Animation complete.</div>');
	  
  });

but i still cant get the if statement to work in there

[jscheuer1]

Have you tried my code?

In any case, to get the if statement to work in real time during the animation you will have to use the options object as my example does, not the the options arguments as both of your examples do.

You don't have to use my exact code, but the format of:

.animate({properties object}, {options object});

You are using this format:

.animate({properties object}, speed_argument, callback_argument);

See the difference? For more information on the differences between the two methods of using the jQuery .animate() function, see:

http://api.jquery.com/animate/

[ggalan]

hmm, tried these without luck

$('.block').animate({left: 450}, {duration: 'slow', step: function(){
		var b = $(this);
		if(b.offset().left + b.width(true) > 400){
			b.stop(true, true).animate({left: 0}, 1000);
		}
	});

$('.block').animate({left: 450}, {duration: 'slow', step: function(){
		var b = $(this);
		if(b.offset().left > 400){
			b.stop(true, true).animate({left: 0}, 1000);
		}
	});

$('.block').animate({left: 450}, {duration: 'slow', step: function(){
		var b = $(this);
		if(b.offset().left + b.width(true) > 400){
			b.stop().animate({left: 0}, 1000);
		}
	});

[jscheuer1]

As I said, it could depend upon the markup, and other tweaks may be required. One thing I didn't mention though is that the .offset().left represents the distance from the left of the window, not the distance from the left of the starting point. If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[ggalan]

the script is very straight forward at this point

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
$(document).ready(function(){

$('.block').animate({"left": 450}, {duration: 'slow', step: function(){
	var b = $(this);
	if(b.offset().left + b.width(true) > 400){
	 b.stop(true, true);
	  b.animate({left: 0}, 1000);
		b.stop(true, true).animate({left: 0}, 1000);
	}
});

/*$(".block").animate({ "left": 500 }, 1000, function() {
  $(this).after('<div>Animation complete.</div>');
  
});*/
});<!--$(document).ready-->
</script>
<style>
	.block { position:relative; background-color:#abc; left:50px; width:90px; height:90px; margin:5px; }
</style>
</head>
<body>

	<div class="block"></div>

</body>
</html>

[jscheuer1]

Sorry, I had a typo in my post (now corrected here and in the original) it should have been:

$('.block').animate({left: 450}, {duration: 'slow', step: function(){
	var b = $(this);
	if(b.offset().left > 400){
		b.stop().animate({left: 0}, 1000);
	}
}});

As you can see, I left out a closing brace (red) in the above.

Fix just that much and it works. However, it's hard to follow. That's why I missed it in the first place. So I would suggest this (the same code really, just easier to follow):

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
jQuery(function($){
	function stepback(){
		var b = $(this);
		if(b.offset().left > 400){
			b.stop().animate({left: 0}, 1000);
		}
	}
	$('.block').animate({left: 450}, {duration: 'slow', step: stepback});
});


</script>
<style>
.block {
	position: relative;
	background-color: #abc;
	left: 50px;
	width: 90px;
	height: 90px;
	margin: 5px;
}
</style>
</head>
<body>

	<div class="block"></div>

</body>
</html>

Tested and works.