值以百分比形式存储在 Var 中，但以像素形式输出答案

【问题标题】：Value Stored in Var as Percent but outputs it as pixels值以百分比形式存储在 Var 中，但以像素形式输出
【发布时间】：2018-06-18 20:08:52
【问题描述】：

我想通过鼠标悬停动画来改变它的宽度。当鼠标离开时，我希望 div 的宽度与动画之前一样。

由于我希望这个 sn-p 与不同的 div（具有不同的宽度）一起工作，我不能只写宽度值，而是必须将初始宽度存储在 var 中。

我的 var 的输入是 20%。它从我的 CSS 文件中获取这个值。

 Var oldwidth = $tab.css('width')

将宽度设置为 10 后，将宽度设置为 var=oldwidth。 Oldwidth 应该回到 20%，但它现在是一个整数值。

$("#zeile-1").mouseenter(function(event) {
  $("#zeile-1 .tab.empty").each(function() {
    var $tab = $(this)
    if (this.hasAttribute("animating")) return
    var oldWidth = $tab.css('width') //here the Var stores my Value (20%) from my css.//
    $tab.attr("oldWidth", oldWidth)
    $tab.attr("animating", "mouseenter")
    $tab.animate({
      width: "10"
    }, 1000);
  })
}).mouseleave(function() {
  $("#zeile-1 .tab.empty").each(function() {
    var $tab = $(this)
    if ($tab.attr("animating") == "mouseleave") return
    var oldWidth = $tab.attr("oldWidth")
    $tab.attr("animating", "mouseleave")
    $tab.animate({
      width: oldWidth //here it outputs the value but as px//
    }, {
      duration: 1000,
      complete: function() {
        $tab.removeAttr("animating");
      }
    })
  })
})

<body>
      <div class="zeile" id="zeile-1">
        <div class="a tab">31.</div>
        <div class="b tab empty">&emsp;</div>
        <div class="c tab">MAR</div>
        <div class="d tab empty">&emsp;</div>
        <div class="e tab empty">&emsp;</div>
        <div class="f tab">201</div>
        <div class="g tab empty">&emsp;</div>
        <div class="h tab empty">&emsp;</div>
        <div class="i tab">8</div>
      </div>

.tab {
  height: auto;    
}

.a{
    width: 11%;
}
.b{
    width: 10%;
}
.c{
    width: 17%;
}
.d{
    width: 17%;
}
.e{
    width: 17%;

and so on..

我可以告诉 Var 将我的值存储在 % 中并将其输出为 % 吗？

【问题讨论】：

自定义属性应以data-* 开头，如data-oldWidth。为什么不直接使用 css #zeile-1 .tab.empty:hover ？

标签： jquery html css output var

【解决方案1】：

jQuery css() 函数将始终返回计算出的宽度值而不是原始值（在本例中为百分比）。有两种方法可以获得原始百分比值：

您可以使用以下代码获取内联宽度值：$(selector)[0].style.width。此解决方案的问题在于，如果您的样式最初位于样式表中而不是内联中，则它不会检索该值。

解决此问题的方法是清除您之前设置的内联值：$(selector).css('width', '')。显然，这将清除您可能已设置的先前内联值，但该元素仍将使用样式表中定义的任何值。您可能想检查是否有使用第一位代码设置的先前宽度值，并在需要恢复时保持该状态。

请注意，这里还有其他解决方案（例如隐藏/显示）：get CSS rule's percentage value in jQuery。隐藏/显示不会闪烁元素，因为元素不会在我认为的两个步骤之间更新。

【讨论】：

【解决方案2】：

将宽度设置为 10

你在 10 之前是什么意思？您需要选择要使用的单位，如果是像素则使用px，如果存在则使用%，您需要在动画函数中指定单位，例如：

$tab.animate({
    width: '10px'
    //Or
    width: '10%'
}

在oldWidth 中还需要单位：

$tab.animate({
    width: oldWidth+'px'
    //Or
    width: oldWidth+'%'
}

注意：Var 应为 var，v 小写。

【讨论】：

如果我说 $tab.animate({ width: '10%' } 和 $tab.animate({ width: oldWidth+'%' } 它动画到 10% 然后停止工作
好的，请将 HTML 代码添加到您的问题中，以便我们与您核实...