动画网格列：强制屏幕边框

问题描述

我正在制作一个在悬停时改变大小的动画网格。这是代码笔（确保它处于桌面模式，而不是移动模式）：

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

它工作得很好，但是当您滑过磁贴时，动画会变慢，而且非常正确的磁贴不够快，无法填满屏幕（您可以看到黄色背景）。

有没有办法强制正确的磁贴贴在正确的屏幕边框上？

谢谢

解决方法

关于缓慢，我建议你找一个动画库来帮助你加快速度，关于瓷砖没有足够快的填充，它是你设置的类，你需要了解引导网格系统并知道幻灯片应该如何查看 3 列网格，单击此以找出更好的grid 还尝试先使用 html 和 bootstrap 设计它，然后再添加 js 函数