Say "Hello!"

  • This field is for validation purposes and should be left unchanged.

Set up a custom function


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function initNav() {
    //set up variables
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    var logo = 328;
    var cap = 54;
    var pancake = windowWidth - logo - 3;
   
    //set up function
    $(function() {
        $("#main-nav .logo").stop(true, true).animate({"width": logo}, 250, 'swing');
        $("#main-nav .grup").stop(true, true).delay(100).animate({"width": pancake}, 300, 'swing');
        $('#main-nav .cap').stop(true, true).delay(1000).animate({backgroundColor: '#d81f27',color: 'white'}, 'fast').html('–');
    }, function() {
        $("#main-nav .grup").stop(true, true).delay(2000).animate({width: 54}, 300, 'swing');
        $("#main-nav .logo").stop(true, true).delay(2300).animate({"width": logo}, 300, 'swing');
        $('#main-nav .cap').stop(true, true).delay(500).animate({backgroundColor: '#C0C0C0',color: 'red'}, 'fast').html('+');
    });
}

//call function on user event
$("#main-nav .cap").click(initNav); //call the function on click of element
$("#main-nav .logo").hover(initNav); //call the function on hover of element​​​​

Back to Snippets Follow me on GitHub

Ashley Cameron logo
Blog