Extra Form

안녕하세요.

 

네모의 꿈 레이아웃을 사용해서 모바일 레이아웃을 만들고 있는데

 

저사양의 모바일 같은 경우는 슬라이드 효과가 나타나면서 버벅거리는 현상이 생겨

 

애니메이트 효과를 없애려고 합니다.

 

그런데 제가 자바스크립트를 잘 다루지 못해서 이렇게 질문을 드리게 됐습니다.

 

간단하게 생각해서 slideup,slidedown 부분을 show,hide로 대체해봤는데

 

사라지는 건 적용되나 나타나는 부분은 안 되네요.

 

아래는 네모의 꿈의 자바스크립트 소스입니다.

 

여기서 어떻게 수정하면 애니메이트 효과가 사라질까요?

 

제가 원하는 건 애니메이트 없이 바로 메뉴가 나타나는 것입니다.

 

아직 미숙한지라 도움을 주시면 감사할 거 같습니다.

 

 

 

 

jQuery(function($)
{
    "use strict";

    /* adjust the width of the right member menu */
    var menu_width = function()
    {
        if($('#layout_gnb>ul>li:first-child').width() > 50)
        {
            $('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', $('#layout_gnb>ul>li:first-child').width()).css('min-width', $('#layout_gnb>ul>li:first-child').width());
        }
    }

    $( window ).resize(function()
    {
        if($('#layout_gnb>ul>li:first-child').width() > 50)
        {
            menu_width();
        }
    });

    menu_width();

    /* mobile hamburger menu toggle */
    $(".layout_mobile_menu").each(function()
    {
        $( this ).click(function( event )
        {
            event.preventDefault();
            layout_toggleMenuOpener( $( this ).get(0) );
        });
    });

    /* detect scrolling up or down to hide or show the hamburger menu */
    var previousScroll = 0;
    var simpleScrolled = false;
    var scrollThreshold = 5;

    /* detect window scrolling */
    $( window ).scroll(function()
    {
        simpleScrolled = true;
    });

    /* refresh window scrolling per 250 ms, and show/hide the menu */
    setInterval(function()
    {
        if (simpleScrolled) {
            display_menu();
            simpleScrolled = false;
        }
    }, 250);

    /* function to show/hide the menu */
    var display_menu = function()
    {
        var currentScroll = $(window).scrollTop();

        if (currentScroll > previousScroll)
        {
            if($("#layout_menu_toggle").css( 'position' ) === 'fixed')
            {
                $("#layout_menu_toggle").fadeOut();
            }
        }
        else
        {
            if($("#layout_menu_toggle").css( 'position' ) === 'fixed')
            {
                $("#layout_menu_toggle").fadeIn(400, function() {
                    $("#layout_menu_toggle").css('display', '')
                });
                ;
            }
        }
        previousScroll = currentScroll;
    }

    /* keyboard accessibility for dropdown menu */
    $(".layout_dropdown").each(function()
    {
        $( this ).focusin( function( event )
        {
            $('*[data-dropdown="active"]').css('display', '').attr('data-dropdown', '').parents('li.layout_dropdown').removeClass('layout_focus');
            $( this ).addClass('layout_focus');
            $( this ).find("ul.layout_dropdown-content").css('display', 'block').attr('data-dropdown', 'active');
        });
    });

    $('body').focusin(function( event )
    {
        if (!$(event.target).parents('.layout_dropdown').is('.layout_dropdown'))
        {
            $('*[data-dropdown="active"]').css('display', '').attr('data-dropdown', '').parents('li.layout_dropdown').removeClass('layout_focus');
        }
    });
    /* keyboard accessibility for dropdown menu END */

    function layout_toggleMenuOpener(obj)
    {
        if(obj.classList.contains("is-active") === true)
        {
            var targetMenu = $(obj).attr('data-target');
            $('#' + targetMenu).slideUp('300', function()
            {
                $(this).css('display', '');
            });

            obj.classList.remove("is-active");
        }
        else {
            var targetMenu = $(obj).attr('data-target');
            if(targetMenu == 'layout_gnb')
            {
                $('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', '').css('min-width', '');
                $('html,body').animate({scrollTop:0}, 200);
            }
            $('#' + targetMenu).slideDown('300');

            obj.classList.add("is-active");
        }
    }

    // Language Select
    $('.layout_language>.toggle').click(function()
    {
        $('.selectLang').toggle();
    });
});
 


서버에 요청 중입니다. 잠시만 기다려 주십시오...