Please see http://angelaandtom.co.uk/#
When one clicks on the "WORK" link on the bottom left a menu slides open. If one selects one of these links images fade in and out using jQuery. The problem is that as the user clicks between these links the menu itself fades in an out too, I do not want this to happen. I want the menu itself to remain constant while the hidden images fade in an out.
My jQuery code is very long as I am new to this and made it in the only way I could understand it, I am sure there is a neater way of achieving these effects, however I am not sure that my code is the problem effecting the menu or not?
$('#contact').click(function () {
$('#contact-info').animate({
width: 'toggle'
});
$('#work-menu').fadeOut('100');
$('.hidden-work').fadeOut('100');
});
$('#menu').click(function () {
$('#work-menu').animate({
width: 'toggle'
});
$('#contact-info').fadeOut('100');
$('.hidden-work').fadeOut('100');
});
$('#dust').click(function () {
$('#dust-div').fadeToggle('500');
$('#contact-info').fadeOut('100');
});
$("#dust").click(function () {
$("#dust a").addClass("active");
$("#fatal a, #youth a, #hurt a, #black a").removeClass("active");
$('#youth-div, #fatal-div, #hurt-div, #black-div').fadeOut('100');
});
$("#fatal").click(function () {
$("#fatal a").addClass("active");
$('#fatal-div').fadeIn('500');
$("#dust a, #youth a, #hurt a, #black a").removeClass("active");
$('#dust-div, #youth-div, #black-div, #hurt-div').fadeOut('100');
});
$("#hurt").click(function () {
$("#hurt a").addClass("active");
$('#hurt-div').fadeIn('500');
$("#fatal a, #youth a, #dust a, #black a").removeClass("active");
$('#dust-div, #youth-div, #fatal-div, #black-div').fadeOut('100');
});
$("#youth").click(function () {
$("#youth a").addClass("active");
$('#youth-div').fadeIn('500');
$("#dust a, #fatal a, #hurt a, #black a").removeClass("active");
$('#dust-div, #black-div, #fatal-div, #hurt-div').fadeOut('100');
});
$("#black").click(function () {
$("#black a").addClass("active");
$('#black-div').fadeIn('500');
$("#dust a, #fatal a, #hurt a, #youth a").removeClass("active");
$('#dust-div, #youth-div, #fatal-div, #hurt-div').fadeOut('100');
});
$("#menu").click(function () {
$("#fatal a, #youth a, #hurt a, #dust a").removeClass("active");
$('#dust-div').fadeOut('100');
});