if statement .css 'left' in percentages

I need to trigger an event only if the object is at a certain percentage of left, using the .css(), all of this in jquery. so far this is my code:

html:

<div id="midDiv"><img ..../></div>

script:

$(document).ready(function(){
$("#midDiv").click(function () {

  if($('#midDiv').css('left') === '50%')
  {
      $("#midDiv").animate({
    left: "+=70%"},
    { queue: false, duration: 900, easing:'swing' }
     );
  }
});

}); 

this is obviously not working, but it works if I use "px" instead of %. I suppose it's because .css() returns a string, but I would like to know if there's a way of doing it with percentages. I also tried with offset() but it returned the value 开发者_如何学编程in pixels too.

---

There's no way to get that percentage with .css(), You'd have to calculate that percentage manually.

---

This is because .css returns the actual value set, it isn't calculated in any way.

One solutions would be to traverse the DOM tree upwards until you find the closest parent that has a position != static, get it's width and divide the elements offset with that value.

Be sure to use deltas though due to the nature of floating points.