0

I'm working on an animated grid that changes the size when hovering. Here is the code pen (make sure it is in desktop mode, not mobile):

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

This is the JS I used for animation:

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

It works perfectly fine, but when you slide across the tiles the animation is to slow and the very right tile is not fast enough to fill the screen (you can see the yellow background).

Is there a way to force the right tile to stick to the right screen border?

Thanks

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Marco
  • 9
  • 5

1 Answers1

0

regarding the slowness, i suggest you find an animation library to help you with you speed, and about the tile no filling fast enough , its the classes which you set, you need to understand bootstrap grid system and know how the slide should look on a 3 column grid, click this to find out better grid also try designing it first with html and bootstrap, before adding you js function

opia austin
  • 64
  • 11