From NETTUTS see articles, the effect is very good, somewhat akin to make Flash effect, (link: http://demo.jb51.net/js/2014/KeyPress/), the original text speaks of implementation steps very clear, I won’t mention, implementation effect of logic is simpler, namely slideDown () method,

Jquery slideDown() method for sliding.

// shows a given element and hides all others 
function showViaKeypress(element_id) 
{ 
    $(".container").css("display","none"); 
    $(element_id).slideDown("slow"); 
} 

// shows proper DIV depending on link 'href' 
function showViaLink(array) 
{ 
    array.each(function(i) 
    {    
        $(this).click(function() 
        { 
            var target = $(this).attr("href"); 
            $(".container").css("display","none"); 
            $(target).slideDown("slow"); 
        }); 
    }); 
} 

The keypress() method is not difficult, but we seldom use keypress on the page. This example is novel and worth referring to. If necessary, we can use it in the project.

$(document).keypress(function(e) 
    { 
        switch(e.which) 
        { 
            // user presses the "a" 
            case 97:    showViaKeypress("#home"); 
                        break;   

            // user presses the "s" key 
            case 115:   showViaKeypress("#about"); 
                        break; 

            // user presses the "d" key 
            case 100:   showViaKeypress("#contact"); 
                        break; 

            // user presses the "f" key 
            case 102:   showViaKeypress("#awards"); 
                        break; 

            // user presses the "g" key  
            case 103:   showViaKeypress("#links"); 
        } 
    });