tx=$('#book').css('top');
     ty=$('#book').css('left');
	 
	 
     tx1 = tx.replace("px", "");
	 ty1 = ty.replace("px", "");
	 
		 alert(tx1+" "+ty1);
			 if (ty1 > 100)

Вот где то так работает, тоесть мы методом replace форматируем строку, убираем px (меняя на ничего, вот бы так в магазине), и после этого все проверяется норм, тоесть условие что ty1>100 а если без replace то нифига!

parseInt наверное даже лучше)) или правильнее!

Нужно провести тест на скорость работы, каким методом быстрее перевести в нужный вид и проверить? Например 100 000 0 вариантов!
Что Вы на это скажите Валентин?

$(document).ready(function() {

var y = '+=1';
var x = '+=1';
var i = 0;

for (i=0;i<500;i++)
{
	   $("p").text(i);	
	 tx=$('#book').css('top');
     ty=$('#book').css('left');
	 
	 
     tx1 = tx.replace("px", "");
	 ty1 = ty.replace("px", "");
	 
		 
			 if (ty1 > 100)
			 {
				y = '-=1'; 
		 	 }	else
			 {
				 y = '+=1';
			 }
			 if(tx1 > 100)
			 {
				x = '-=1';
			 }	else
			 {
				 x = '+=1';
			 }
  			$('#book').animate(
				{
	   			opacity: 0.25,
    			top:x,
				left: y
    	     	}, 1, function() {
	  // alert($('#book').css('top'));
    // Animation complete.
 				 });
}
//});

});

Грубо говоря эта функция должна проверять каждый раз условие на зашел ли элемент за границу, а получается что выполняется сначала строчка $("p").text(i); , а только потом анимация и то без проверки условий, короче говоря порядок выполнения неправильный! надеюсь ясно что я хочу получить в итоге