CODEWITHSUNDEEP
javascriptjquerycss
user7173077
user7173077

Reputation:

Smooth animation without lagging

I just create website and i have a problem which changing a lot.

This is website url : http://www.mphotography.lt

The problem is that when we click menu icon, side menu animation is triggered and side menu become visible with jquery animation.

This is js file : 

    $(document).ready(function()
    {
         $( "#show-menu" ).click(function() 
         {
            $('.content .column').animate(
            {
              width: '33.333%'
            }, 500);

            $('.first-side-menu').animate(
            {
              width: '0px'
            }, 500);

            var newWidth = $('body').width() - 280;
            $('.side-menu').css("display", "block");
            $('.side-menu').animate(
            {
              width: '280px'
            }, 500);
            $('.content').animate(
            {
              width: newWidth,
            }, 500);
            if($('.photopreview').css("display") == "none" || $('.photopreview').css("display") === undefined)
            {
                $('.content').css("overflow-y", "scroll");
            }
    });

});

The problem is that animation isn't smooth and without lag.

Upvotes: 0

Views: 725

Answers (1)

Gerard
Gerard

Reputation: 15786

jQuery is slow with animations. It's better to do the animation in CSS. The code below toggles classes for the main content and the side menu.

$(document).ready(function() {
  $("#show-menu").click(function() {
    $(".side-menu").toggleClass("show");
    $(".container").toggleClass("hide");
  });
});
.wrapper {
  display: flex;
}

#show-menu {
  cursor: pointer;
}

.container {
  background: lightgray;
  width: calc(100% - 50px);
  transition: width 1s ease;
}

.side-menu {
  background: darkgray;
  width: 50px;
  transition: width 1s ease;
}

.show {
  width: 280px;
  transition: width 1s ease;
}

.hide {
  width: calc(100% - 280px);
  transition: width 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="side-menu"><span id="show-menu">Click</span></div>
  <div class="container">Container</div>
</div>

Upvotes: 1

Related Questions