时间戳

首页 > 解决方案 > 动画网格列：强制到屏幕边框

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

问题描述

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

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

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

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

谢谢

标签： htmlcssanimationgridbootstrap-grid

解决方案

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

推荐阅读