动画网格列:强制到屏幕边框

Question

我正在制作一个动画网格，它可以在悬停时改变大小。下面是代码笔(确保它是在桌面模式，而不是移动模式):

https://codepen.io/marco_lu/pen/abBmwEJ

这是我用来制作动画的JS:

$(".home-tile").hover(
function () {
$(this).addClass("col-lg-6");
$(this).siblings().addClass("col-lg-3");
$(".home-tile").removeClass("col-lg-4");
},
function () {
$(this).removeClass("col-lg-6");
$(this).siblings().removeClass("col-lg-3");
$(".home-tile").addClass("col-lg-4");
}
);

它工作得很好，但是当你滑动瓷砖时，动画变慢了，右边的瓷砖不够快，不足以填满屏幕(你可以看到黄色的背景)。

是否有一种方法可以强制右贴片粘贴到右屏幕边框?

感谢

Answer 1

关于慢，我建议你找一个动画库来帮助你提高速度，关于平铺没有填充足够快，这是你设置的类，你需要了解bootstrap网格系统，知道幻灯片在3列网格上应该是什么样子，点击这个来找到更好的网格，也尝试先用HTML和bootstrap设计，然后再添加js函数