JQuery的，错误的左翼位置

Question

我有这样的代码：

$(this).closest("p").after('<strong>' + arMess[iCurIndex] + '</strong>').next().animate({ 
      top: $(this).offset().top - 57, 
      left: -$(this).width() //[First value] Here i get 148px on chrome and 150px on firefox 

     }, 300,function(){ 
      alert($(this).offset().top - 57); 
      alert(-$(this).width()); //[Second value] Here i get the true width the one i want to present the left 
     }); 

代码概述： 在第一线我动画STRONG元素

正如你可以看到我得到2个不同的值从- $（this）.width（）：

第一个值：我在动画过程中获得。

第二个值：我得到的动画结束后。

如果有人有大约原因想法，我得到2个不同的价值观，我将非常感激。

Answer 1

这里的问题是，JavaScript的关键字这没有在内部功能相同值，是动画作为后调用它会在你设置宽度时进行。对于第一个值，此是触发动画的对象。在警报被调用的函数这是正在动画的对象。

试试这个：

var $strongElement = $(this).closest("p").after('<strong>' + arMess[iCurIndex] + '</strong>').next(); 

$strongElement.animate({ 
     top: $(this).offset().top - 57, 
     left: -$strongElement.width() 
    }, 300, function(){ 
    alert(-$(this).width()); 
}); 

见http://jsfiddle.net/vtyjf/

Answer 2

尝试outerWidth或检查元素的CSS，如果它得到了float:left

$(this).closest("p").after('<strong>' + arMess[iCurIndex] + '</strong>').next().animate({ 
      top: $(this).offset().top - 57, 
      left: -$(this).outerWidth(); 
         // use .outerWidth(true); if you want to 
         //calculate with margin and border values 

}, 300,function(){ 
      alert($(this).offset().top - 57); 
      alert(-$(this).outerWidth()); 
});