Добавление переменной в анимацию css

Question

У меня возникла проблема, зная, как правильно записать эти переменные, а затем поместив их в 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); 
}); 

Всякий раз, когда я это делаю или варианты этого, мой код не загружается.

Я нахожу край между элементом на моей странице и в верхней части окна.

Затем я создаю поля, добавляя в поле, которое я нашел в первой переменной, и установил остальные 3 поля на 0 (поскольку единственным полем, требуемым для изменения, является верхнее поле).

Затем я создаю deployCanvasMargin, который является css, а затем в animate Я добавляю в переменную.

Я думал, что это будет эффективно сделать исход animate этого:

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

(Предполагая 50px есть запас найден)

Edit: я нашел еще один вопрос, после того, как здесь ответ помог мне исправить мой animate выпуск. У вас не может быть 100vh в математике. Мне нужно создать переменную, которая найдет высоту видового экрана и использовать ее, а не css 100vh. Глупый меня :)

Для тех, кто имеет такую ​​же проблему и является довольно неопытным, как я, я решил, что дополнительный вопрос, делая этот

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

Тогда изменение первого переменного в этом

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

Answer 1

JQuery одушевленные имеет следующий формат

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

означает

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

но вы передаете объект для анимации.

вместо этого использовать ..

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

Вы не можете использовать margin: 10px 0px 0px 0px сразу вместо того, чтобы разделить его на кадр анимации и использовать margin-left затем margin-right ..

Answer 2

{'margin' : 50px, 0, 0, 0} не действительны JS.

var newCanvasMargin = findCanvasMarginTop, 0, 0, 0; недействителен JS либо.

Вместо того, что вы хотите сделать это:

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); 
});