animation...code

[jimfog]

Following, is a function that animates a div succesfuly:

$("#arrow").click(function(){    $("#customers").animate({left:0})}); 

I want to accomplish the following, on clicking the same element(that is,#arrow), #customer will go backto its original position, which is a css left property that hides #customer from browser view-specifically css left must have a value of -287px; What do you suggest?I tried first, by integrating in the above code a second function where it would check the css if is set to 0, and if that be true, animateto css -257. It did not work though.Of course the logic might be correct but the syntax might be wrong. So, I am just stating the problem from the beginning, without laying out the code of the logic I mention above.

[bittu4u4ever]

Hope this solves your problem

$("#arrow").click(function(){	var $customers = $("#customers");	if($customers.offset().left<0)		$customers.animate({left:0});	else		$customers.animate({left: -257+'px'});}); 

[jimfog]

yes it helps, thanks.I have one question though, What is the reason for adding pixels in the second conditional(-257+'px')? It works fine without it too.

[Ingolme]

In standards compliant mode (a page with a <!DOCTYPE>), if you don't specify units for a CSS property the value will be ignored. This is because it could be pixels, centimeters, ems, or any other unit. Since you haven't specified the browser can't know. I don't know if jQuery requires it, though. jQuery might add the px internally.

[jimfog]

I did a slight change in the code(replacing an element) and the code is ruined somehow-the second animate does not take place.Here is the code:

$("#arrow").click(function(){	    var $customers = $("#customers");	    if($customers.offset().left<0)		 { $customers.animate({left:0},function()	  {$("#arrow").replaceWith("<div id='arrow'><img src='Images/cust-arrow_l.png' alt='arrow' width='10' height='10'></div>")	  });}	    else		  {$customers.animate({left: -287});}});});

As you see I am just replacing the one div with another with exactly the same name but with a different picture enclosed in it.I cannot understand what is wrong here.The second animation,after the else statement(and after the replacement of the div) does not take place. I am just replacing the div

[dsonesuk]

It because, it targets the original #arrow element, this animation click function has not been assigned to new #arrow element. options1) replace the inner child elements, or content only, of #arrow element.2) use .live() $("#arrow").live('click', function() {//rest of code});

[jimfog]

yes, yous recommendation worked, thanks.