【发布时间】:2013-07-17 16:41:44
【问题描述】:
http://jsfiddle.net/MeoMix/8zg2V/83/
我有以下 jsFiddle。这个想法是,当显示一个太长的上下文菜单项时,它会以省略号呈现,但在鼠标悬停时它会平移文本。
有问题的代码:
//Provides helper methods for non-specific functionality.
define('helpers', [], function () {
'use strict';
return {
scrollElementInsideParent: function(element, parent) {
// Scroll the element if its too long to read.
$(element).mouseover(function () {
var distanceToMove = $(this).width() - $(parent).width();
console.log("My width and parent width:", $(this).width(), $(parent).width());
$(this).animate({
marginLeft: "-" + distanceToMove + "px"
}, {
// Just a feel good value; scales as the text gets longer
duration: 15 * distanceToMove,
easing: 'linear'
});
}).mouseout(function () {
$(this).stop(true).animate({ marginLeft: 0 });
});
}
};
在这里我记录了被滚动元素的宽度以及它的父元素的宽度。控制台输出:
我的宽度和父宽度:360 230
但这在查看指标时似乎不正确:
这是为什么?
【问题讨论】:
-
你有
box-sizing: border-box吗? -
尝试使用
outerWidth() -
@bfavaretto 你可以看到 jsfiddle。他们没有 box-sizing:border-box 。 Terry outerWidth() 返回与 .width() 和 .innerWidth() 和 .outerWidth(true) 相同的值。
-
你在开玩笑吧?
this引用<a>元素,其宽度为auto,最终宽度为230px。你为什么看<li>? -
@SeanAnderson 也许我又误会了。让我再看一遍
标签: javascript jquery css width