Adding variable into animate css

Question

I am having a problem knowing how to correctly write these variables and then placing them into animate.

var findCanvasMarginTop = ((100vh - 120) - cvsH) / 2;
var newCanvasMargin = findCanvasMarginTop + "px", 0, 0, 0;
var deployCanvasMargin = {'margin' : newCanvasMargin};
$('#text__menu--show').click(function () {
    $('#canvas__container').animate(deployCanvasMargin, 100);
});

Whenever I do this or variations of this my code fails to load.

I am finding the the margin between an element on my page and the top of the window.

Then I am creating the margins adding in the margin I found in the first variable and setting the other 3 margins to 0 (as the only margin required to change is the top margin).

Then I am creating deployCanvasMargin which is the css, then in animate I add in the variable.

I thought this would effectively make the outcome of animate this:

 $('#canvas__container').animate({'margin' : 50px, 0, 0, 0}, 100);

(Assuming 50px is the margin found)

Edit: I found another issue after the answer here helped me fix my animate issue. You can't have 100vh in the math. I need to create a variable that finds the viewport height and use that, not the css 100vh. Silly me :)

For anyone who has this same issue and is pretty inexperienced like me, I solved that additional issue by doing this

var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)

Then changing the first variable to this

var findCanvasMarginTop = ((h - 120) - cvsH) / 2;

{'margin' : 50px, 0, 0, 0} is not valid JS

Soubhik Mondal
– Soubhik Mondal

2017-02-15 07:34:24 +00:00
Commented Feb 15, 2017 at 7:34 — Soubhik Mondal
– Soubhik Mondal, Commented Feb 15, 2017 at 7:34

Atul Sharma · Accepted Answer · 2017-02-15 07:34:34Z

1

jquery animate has following format

$(selector).animate({style}, 100);

means

$(selector).animate({margin : '10px'}, 100);

but you are passing object to animate.

instead use..

 $('#canvas__container').animate({margin : newCanvasMargin}, 100);

You cannot use margin: 10px 0px 0px 0px at once instead divide it into animation frame and use margin-left then margin-right ..

answered Feb 15, 2017 at 7:34

Atul Sharma

11k10 gold badges42 silver badges69 bronze badges

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

Comments

Soubhik Mondal · Accepted Answer · 2017-02-15 07:41:14Z

1

{'margin' : 50px, 0, 0, 0} is not valid JS.

var newCanvasMargin = findCanvasMarginTop, 0, 0, 0; is not valid JS either.

Instead what you want to do is this:

var findCanvasMarginTop = ((100vh - 120) - cvsH) / 2;
var newCanvasMargin = findCanvasMarginTop + "px";
var deployCanvasMargin = {'margin-top' : newCanvasMargin};
$('#text__menu--show').click(function () {
    $('#canvas__container').animate(deployCanvasMargin, 100);
});

answered Feb 15, 2017 at 7:41

Soubhik Mondal

2,6661 gold badge15 silver badges19 bronze badges

Collectives™ on Stack Overflow

Adding variable into animate css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related