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是找到的保证金）

修改：我在答案后找到了另一个问题，帮助我解决了animate问题。你在数学上不可能有100vh。我需要创建一个找到视口高度的变量并使用它，而不是css 100vh。傻我:)。

对于那些有同样问题并且像我一样缺乏经验的人，我通过这样做解决了这个问题

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

然后将第一个变量更改为此

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

Answer 1

jquery animate具有以下格式

$(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;也无效。

相反，你要做的是：

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

将变量添加到动画css中

2 个答案: