Почему моя анимация слайдов jQuery Laggy/Jumpy?

Question

Я пытаюсь реализовать анимацию SlideDown, чтобы показать div, когда нажимается другой div.

Я встречал много вопросов, которые сейчас отсортированных, но главная проблема в том, что анимация Jquery очень лага и Jumpy

Что я могу сделать, чтобы сгладить анимацию? Я читал об облегчающем плагине - они помогают?

код здесь: http://www.bootply.com/a8pRzgsjtl

JQuery:

$(document).ready(function() { 
        $(".virus").click(function() { 
        $(".v").siblings().hide(); 
        $(".information").slideDown(2000); 
        $(".v").fadeIn('slow'); 
        $('html, body').animate({scrollTop:200}, 1000) 

       }); 

       $(".screenRepair").click(function() { 
        $(".screenInfo").siblings().hide(); 
        $(".information").slideDown(2000); 
        $(".screenInfo").fadeIn(1000); 
        $('html, body').animate({scrollTop:200}, 1000); 
       }); 

       $(".SoftwareRepair").click(function() { 
        $(".softwareR").siblings().hide(); 
        $(".information").slideDown('slow'); 
        $(".softwareR").fadeIn('slow'); 
        $('html, body').animate({scrollTop:200}, 1000); 
       }); 

       $(".MemoryUpgrades").click(function() { 

        $(".MemoryInfo").siblings().hide(); 
        $(".information").slideDown("slow"); 
        $(".MemoryInfo").fadeIn('slow');   
        $('html, body').animate({scrollTop:200}, 1000); 
       }); 

       $(".hardwareRepair").click(function() { 
        $(".hardwareInfo").siblings().hide(); 
        $(".information").slideDown('slow'); 
        $(".hardwareInfo").fadeIn("slow"); 
        $('html, body').animate({scrollTop:200}, 1000); 
       }); 

       $(".WindowsReinstall").click(function() { 
        $(".WindowsInfo").siblings().hide(); 
        $(".information").slideDown("slow"); 
        $(".WindowsInfo").fadeIn("slow"); 
        $('html, body').animate({scrollTop:200}, 1000); 
       }); 

       $(".DataRecovery").click(function() { 
        $(".dataInfo").siblings().hide(); 
        $('.information').slideDown('slow'); 
        $(".dataInfo").fadeIn("slow"); 
        $('html, body').animate({scrollTop:200}, 1000); 
       }); 

       $(".maintenance").click(function() { 
        $(".maintenanceInfo").siblings().hide(); 
        $('.information').slideDown('slow'); 
        $('html, body').animate({scrollTop:200}, 1000); 
        $(".maintenanceInfo").fadeIn("slow"); 
       }); 

       $("#close").click(function() { 
        $(".information").slideUp('slow'); 
       }); 


      }); 

Answer 1

Общая проблема с изображениями, если ваши элементы содержат или имеют фоновые изображения убедитесь, что они не слишком тяжелы ...