jQuery: sccd-sk.org jQuery tweaks

script.js

$(".ruka, .ruka div").delay(1000).fadeIn(400).delay(3000);
$(".ruka div").fadeOut(200);


$(document).ready(function () {


    // hand movement: 45angle to the left and then upwards
    var vlavoHore = {
        start: {
            x: 511,
            y: 334,
            angle: 0,
            length: 0
        },
        end: {
            x: 369,
            y: 174,
            angle: 360,
            length: 0
        }
    };


    // hand movement: to the right over the curve
    var doprava = {
        start: {
            x: 369,
            y: 174,
            angle: 20,
            length: 0.346
        },
        end: {
            x: 651,
            y: 174,
            angle: 340,
            length: 0.343
        }
    };

    // hand movement back to its default position
    var vlavoDole = {
        start: {
            x: 651,
            y: 174,
            angle: 360,
            length: 0
        },
        end: {
            x: 511,
            y: 334,
            angle: 0,
            length: 0
        }
    };

    // wait 1sec. then animate for 1.5sec, pause between motions are 1s
    $(".ruka").delay(500).animate({
        path: new $.path.bezier(vlavoHore)
    }, 1500);
    $(".ruka").delay(1000).animate({
        path: new $.path.bezier(doprava)
    }, 1500);
    $(".ruka").delay(1000).animate({
        path: new $.path.bezier(vlavoDole)
    }, 1500);

    // hide hand element after all movements finish in 1.5sec
    $(".ruka").delay(500).fadeOut(400);

});


// sliding menu

var slidemenu = $("#slide-menu"),
    menuitem2508 = $('#menu-item-2633, #menu-item-2697'),
    menuitem2508anchor = $('#menu-item-2633 a, #menu-item-2697 a');

//hide yellow menu at first
slidemenu.css("display", "none"); 

//add yellow bg to dalsie projekty anchor
menuitem2508anchor.addClass('yellow-next-projects'); 

//after clicking on dalsie projekty anchor do stuff
menuitem2508anchor.click(function (e) { 
    e.preventDefault();

    //slide down yellow menu
    slidemenu.slideToggle(400, 'easeInOutQuad', function () { 

        //after slide down add/remove yellow bg on dalsie projekty anchor tag
        if (slidemenu.is(":visible")) { 
            menuitem2508anchor.toggleClass('yellow-next-projects', 1000, 'linear')

            menuitem2508anchor.toggleClass('underline');

        } else {
            menuitem2508anchor.toggleClass('yellow-next-projects', 1000, 'linear');
            menuitem2508anchor.toggleClass('underline');
        }
    });

});

// after clicking on hide button hide the menu and remove yellow-next-projects class
$('.close_button').click(function () {
    slidemenu.slideToggle(500, 'easeInOutQuad', function () {
        //check whether dalsie projekty has/hasn't yellow bg and toggle it based on that
        if (slidemenu.is(":visible")) { 
            menuitem2508anchor.toggleClass('yellow-next-projects', 1000, 'linear');
            menuitem2508anchor.toggleClass('underline');
        } else {
            menuitem2508anchor.toggleClass('yellow-next-projects', 1000, 'linear');
            menuitem2508anchor.toggleClass('underline');
        }

    });
    // prevent from going anywhere after clicking on dalsie projekty anchor tag
    return false; 
});

style.css

.yellow-next-projects {
  /*background: transparent url(images/header-bg.jpg) 0 0 repeat;*/
	border-bottom: 4px solid #000;  
	box-sizing: border-box;  
	display: inline-block;
	padding: 0 0 4px;
	text-decoration: none;  
	width: auto; 
	-webkit-transition: all .1s linear 0s;
	   -moz-transition: all .1s linear 0s;
	    -ms-transition: all .1s linear 0s;
	     -o-transition: all .1s linear 0s;
	        transition: all .1s linear 0s;
}

.yellow-next-projects:hover {
  /*background: transparent url(images/header-bg.jpg) 0 0 repeat;*/
	border-bottom: 4px solid #000;  
	box-sizing: border-box;  
	display: inline-block;
	text-decoration: none;  
	width: auto; 
	-webkit-transition: all .1s linear 0s;
	   -moz-transition: all .1s linear 0s;
	    -ms-transition: all .1s linear 0s;
	     -o-transition: all .1s linear 0s;
	        transition: all .1s linear 0s;
}

.underline {
  background: none;
  text-decoration: none;
}

#slide-menu {
  background: transparent url(images/header-bg.jpg) 0 0 repeat;
  display: none;
  height: 80px;
  overflow: hidden;
  position: relative;
}

.ruka {
	display: none;	
	height: auto;
	left: 511px;
	position: absolute;
	top: 334px;
	width: 71px;
	z-index: 50000;
}

.ruka div {
	display: none;
	font-family: "museoslab700", Georgia;
	font-size: 20px;
	left: -44px;
	position: relative;
	text-align: center;
	top: 7px;
	width: 180px;
}