1

I want to animate a div by mouse-over to change it's width. When mouse-leave, I want the div's width to be as it was before the animation.

Since I want this snippet to work with different div's (with different widths), I cant just write the width values but have to store the initial width inside a var.

The input for my var is 20%. It gets this value from my CSS file.

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

After it animated the width to 10, it then animates the width back to var=oldwidth. Oldwidth should be back to 20% but it is now an integer value.

$("#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..

Can I tell the Var to store my value in % and to output it as %?

Moritz Schottm
  • 11
  • 2
  • Custom attribute should start with `data-*` like `data-oldWidth`. Why not just use css `#zeile-1 .tab.empty:hover` ? – Core972 Jan 09 '18 at 18:02

2 Answers2

0

After it animated the width to 10

What you meen by 10? you need to choose the unit you want to use, if pixel then use px if precent then use %, You need to specify the unit in your animate function like :

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

In the oldWidth also you need the unit :

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

NOTE : Var should be var with v in lowercase.

halfer
  • 19,824
  • 17
  • 99
  • 186
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
0

The jQuery css() function will always return a calculated width value instead of the original value (in this case, a percent). There are two ways you can go about getting the original percent value:

You can get an inline width value with this code: $(selector)[0].style.width. The problem with this solution is that if your style is originally in a stylesheet instead of inline, it will not retrieve the value.

The way you may get around that is to clear the inline value that you previously set with: $(selector).css('width', ''). Obviously, this would clear a previous inline value you may have set but the element would still use any value defined in a stylesheet. You might want to check if there was a previous width value set with the first bit of code and maintain that state for when you need to revert.

Note that there are other solutions (such as a hide/show) here: get CSS rule's percentage value in jQuery. The hide/show one will not flicker an element because the element wouldn't update in-between the two steps I think.