Question

请参阅http://angelaandtom.co.uk/#

当点击左下方的“工作”链接时，菜单会滑开。如果选择其中一个链接图像使用jQuery淡入淡出。问题是，当用户在这些链接之间点击时，菜单本身也会消失，我不希望这种情况发生。我希望菜单本身保持不变，而隐藏的图像会淡出。

我的jQuery代码很长，因为我是新手，并以我能理解的唯一方式制作它，我确信有一种更简洁的方法来实现这些效果，但是我不确定我的代码是影响菜单的问题与否？

$('#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');
});

Answer 1

菜单位于页面淡化区域上方，因此菜单会消失。您可以在z-index: 1;上设置#work-menu。这应该可以解决您的问题。（Here's a fiddle）

使用jQuery淡入淡出的元素导致问题

1 个答案: