Question

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

由于我希望此代码段能够使用不同的div（具有不同的宽度），因此我无法写入宽度值，但必须将初始宽度存储在var中。

我的var输入为20％。它从我的CSS文件中获取此值。

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

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

＆＃13;

$("#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");
      }
    })
  })
})

＆＃13;

<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将我的值存储在％中并将其输出为％？

Answer 1

将宽度设置为10之后

你在10岁时看到了什么？你需要选择你想要使用的单位，如果像素然后使用px如果是precent然后使用%，你需要在你的动画函数中指定单位，如：

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

在oldWidth中你也需要单位：

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

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

Answer 2

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

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

您可以通过以下方式清除以前设置的内联值：$(selector).css('width', '')。显然，这将清除您可能已设置的先前内联值，但该元素仍将使用样式表中定义的任何值。您可能想要检查是否存在使用第一位代码设置的先前宽度值，并在需要还原时保持该状态。

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

值存储在Var中作为百分比但输出为像素

2 个答案: