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

【问题标题】：Animated grid column: force to screen border动画网格列：强制到屏幕边框
【发布时间】：2021-02-10 06:57:08
【问题描述】：

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

这是我用来做动画的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");
    }
  );

它工作得非常好，但是当你滑过瓷砖时，动画会变慢，而且最右边的瓷砖不够快，无法填满屏幕（你可以看到黄色背景）。

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

谢谢

【问题讨论】：

标签： html css animation grid bootstrap-grid

【解决方案1】：

关于速度慢，我建议你找一个动画库来帮助你加快速度，关于瓷砖填充不够快，它是你设置的类，你需要了解引导网格系统并知道幻灯片应该如何查看一个 3 列的网格，点击这里找到更好的 grid 也尝试先用 html 和 bootstrap 设计它，然后再添加你的 js 功能

【讨论】：