Using CSS calc() with .animate()

Question

I'm trying to make a little animation but I'm failing to make it responsive, because "calc()" seems to not work with .animate. Is there another solution to this here?

if (time == 1) {
  $("#message").animate({ marginTop: "calc(-15px + .8vw)" });
} else {
  $("#message").animate({ marginTop: "calc(0px + .8vw)" });
}

With great and best regards, BERNARDO

EDIT: I'm trying to animate a message that appears on my website onchange() of a dropdown menu. It should be responsive so that's why I'm using calc().

<a>Time: </a><select id="time" onchange="setTime()" name="time" required>
                    <option value="1" selected>-</option>
                    <option value="3">-</option>
              </select></br>

So is there like an alternative to make it responsive on another way without calc()?

jQuery doesn't understand calc(), it only understands numbers — adeneo
– adeneo, Commented Jul 20, 2017 at 10:25
No, calc() doesn't work with animate(), however I'm sure there's an alternative method for whatever it is you're trying to do. Could you please update the question to give details of what effect you're trying to achieve. — Rory McCrossan
– Rory McCrossan, Commented Jul 20, 2017 at 10:26
Setting calc() like you want won't work. The easiest way to do it is to "calculate" it's value into a variable. — MVG1984
– MVG1984, Commented Jul 20, 2017 at 10:26
You can use CSS variables and jq-cssvar and CSS transition (instead of animation via JQuery) — Vivick
– Vivick, Commented Jul 20, 2017 at 10:28
Oh right, @VilleKoo that could be a very good solution, I'll try that! Regards to everybody and thanks to for your time. — BERNARDO
– BERNARDO, Commented Jul 20, 2017 at 10:37

Brett DeWoody · Accepted Answer · 2017-07-20 10:40:14Z

5

Since vw is a unit of measure equal to 1% of the width of the viewport, we can calculate the calc() statements into a value jQuery can understand.

var time = true

$('#toggle').click(function () {
  time = !time;
  
  if (time === true) {
    // calc(-15px + .8vw)
    var calc = -15 + (0.08 * $(window).width()) + "px";
    $("#message").animate({ marginTop: calc });
  } else {
    // calc(0px + .8vw)
    var calc = 0 + (0.08 * $(window).width()) + "px";
    $("#message").animate({ marginTop: calc });
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">Toggle</button>
<div id="message">Message</div>

answered Jul 20, 2017 at 10:40

Brett DeWoody

63.3k31 gold badges145 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hallleron · Accepted Answer · 2017-07-20 10:39:15Z

2

Here is the JavaScript alternative to calc().

Basically I calculate my on vw unit values with this line:

var vw_value = $(window).width() / 100 * 0.8;

Working fiddle here. Just change the time variable to 0 to see the difference:

var time = 0;

var vw_value = $(window).width() / 100 * 0.8;

if (time == 1) {
  $("#one").animate({ marginTop: vw_value - 15 + "px" });
} else {
  $("#one").animate({ marginTop: vw_value + "px" });
}

body{
    margin:0;
    padding:0;
}
#one{
    margin-top:0;
    width: 40px;
    background:grey;
    height:40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one"></div>

answered Jul 20, 2017 at 10:39

hallleron

1,9823 gold badges15 silver badges21 bronze badges

Collectives™ on Stack Overflow

Using CSS calc() with .animate()

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related