Как минимизировать следующий JQuery скрипт?

166

03 июля 2018, 00:20

Изучаю JavaScript в частности JQuery, задался вопросом, как можно минимизировать следующий скрипт? - Открывает мобильное меню с анимацией появления текста.

    jQuery('document').ready(function(){
        $('div.mobile-menu').css('display', 'none').fadeOut(100);
        $('.activate-menu').click(function(e){
            $('div.burger-menu').fadeOut(100);
            $('div.mobile-menu').fadeIn(100).css('display', 'block');
            $('div.mobile-menu').addClass('active');
            $('a.first').css('left', '0').css('opacity', '1').css('transition', '0.25s');
            $('a.two').css('left', '0').css('opacity', '1').css('transition', '0.4s');
            $('a.three').css('left', '0').css('opacity', '1').css('transition', '0.65s');
            $('a.four').css('left', '0').css('opacity', '1').css('transition', '0.8s');
            $('a.five').css('font-size', '24px').css('opacity', '1').css('transition', '0.8s');
            $('a.six').css('font-size', '24px').css('opacity', '1').css('transition', '0.8s');
            $('a.deactivate-menu').css('opacity', '1').css('font-size', '24px').css('transition', '1s');
            if ( $('div.mobile-menu').hasClass('active') ) {
                $('html, body').css('overflow-x', 'hidden').css('overflow-y', 'hidden');
            };
        });
        $('.deactivate-menu').click(function(e) {
            $('div.burger-menu').fadeIn(100);
            $('div.mobile-menu').removeClass('active');
            $('a.first').css('left', '-100%').css('opacity', '0').css('transition', '0.25s');
            $('a.two').css('left', '-100%').css('opacity', '0').css('transition', '0.4s');
            $('a.three').css('left', '-100%').css('opacity', '0').css('transition', '0.65s');
            $('a.four').css('left', '-100%').css('opacity', '0').css('transition', '0.8s');
            $('a.five').css('font-size', '0px').css('opacity', '0').css('transition', '0.8s');
            $('a.six').css('font-size', '0px').css('opacity', '0').css('transition', '0.8s');
            $('a.deactivate-menu').css('opacity', '0').css('font-size', '0px').css('transition', '1s');
            $('div.mobile-menu').fadeOut(200);
            $('html, body').css('overflow-y', 'auto').css('overflow-x', 'auto');
        });
    });

Answer 1

jQuery('document').ready(function(){
    const mobileMenu = $('div.mobile-menu'),
          burgerMenu = $('div.burger-menu'),
          deactivateMenu = $('.deactivate-menu'),
          activateMenu = $('.activate-menu'),
          first =  $('a.first'),
          two = $('a.two'),
          three = $('a.three'),
          four = $('a.four'),
          five = $('a.five'),
          six = $('a.six');
    mobileMenu.css('display', 'none').fadeOut(100);
    activateMenu.click(function() {
        burgerMenu.fadeOut(100);
        mobileMenu.fadeIn(100).css('display', 'block');
        mobileMenu.addClass('active');
        first.css('left', '0').css('opacity', '1').css('transition', '0.25s');
        two.css('left', '0').css('opacity', '1').css('transition', '0.4s');
        three.css('left', '0').css('opacity', '1').css('transition', '0.65s');
        four.css('left', '0').css('opacity', '1').css('transition', '0.8s');
        five.css('font-size', '24px').css('opacity', '1').css('transition', '0.8s');
        six.css('font-size', '24px').css('opacity', '1').css('transition', '0.8s');
        deactivateMenu.css('opacity', '1').css('font-size', '24px').css('transition', '1s');
        if (mobileMenu.hasClass('active') ) {
            $('html, body').css('overflow-x', 'hidden').css('overflow-y', 'hidden');
        };
    });
    deactivateMenu.click(function() {
        burgerMenu.fadeIn(100);
        mobileMenu.removeClass('active');
        first.css('left', '-100%').css('opacity', '0').css('transition', '0.25s');
        two.css('left', '-100%').css('opacity', '0').css('transition', '0.4s');
        three.css('left', '-100%').css('opacity', '0').css('transition', '0.65s');
        four.css('left', '-100%').css('opacity', '0').css('transition', '0.8s');
        five.css('font-size', '0px').css('opacity', '0').css('transition', '0.8s');
        six.css('font-size', '0px').css('opacity', '0').css('transition', '0.8s');
        deactivateMenu.css('opacity', '0').css('font-size', '0px').css('transition', '1s');
        mobileMenu.fadeOut(200);
        $('html, body').css('overflow-y', 'auto').css('overflow-x', 'auto');
    });
});

Для minify and obfuscate go to link