1

我正在尝试设置一个插件，它工作得很好，但我注意到第一个字符（First 中的 F）在页面加载时没有被分配正确的宽度。该插件允许您将鼠标悬停并更改为第二个单词，然后在鼠标移出时，更改回第一个单词&然后第一个字符的宽度是正确的。所以我试着在它第一次显示时修复它：

var firstltrwdraw = $('span.char1').width(); // this width is actually 39px but it keeps pulling 27
 console.log('1st Width Raw: ' + firstltrwdraw);
var firstltrwd = parseFloat(firstltrwdraw);
  console.log('1st Width: ' + firstltrwd);
  console.log('1st Type: ' + typeof firstltrwd);
$('span.char1').parent().css({'width': firstltrwd + 'px'});

这是一些典型的。html:

<div class="lslide_wrap">
  <a href="javascript:void(0)" ...>
    <span class="sl-wrapper" ...>
      <span class="char1 sl-w2" ...>S</span> // first letter of Second
      <span class="char1 sl-w1" ...>F</span> // first letter of First
    </span>
    <span class="sl-wrapper" ...>
     ... // second letter of each word, etc
     ...
    <span>
  </a>
</div>

这是一个演示页面： http: //www.partiproductions.com/letterslide_test/index.html

当然会感谢从 char1 获取宽度并将其分配给它的父 sl-wrapper 的一些帮助。

谢谢，比尔

4

2 回答 2

1

不确定，但.css('width')会返回类似“100px”的内容并Math.abs("100px")给出NaN.

尝试使用$('span.char1').width().

此外，您必须记住添加到width任何margin和padding值。

于 2012-07-24T22:08:39.313 回答
0

与填充有关 - 动态更改必须编写脚本等到动画结束然后分配填充以修复视觉宽度问题；）

于 2012-12-27T22:52:29.463 回答