在单击元素时使用javascript淡出元素？

我使用java使div在点击时淡入淡出

当单击其中一个功能时，我如何使其他三个功能淡出，而将单击的功能淡出

这是迄今为止的代码

$(document).ready(function() {

$('#about').click(function(about){    
$('#outside, #outside2, #outside3, #outside4, #outside5, #outside6, #outside7, #outside8, #outside9, #outside10, #outside11').fadeToggle('slow');
});

$('#whyus').click(function(whyus){    
$('#outsidewhy, #outsidewhy2, #outsidewhy3, #outsidewhy4, #outsidewhy5, #outsidewhy6, #outsidewhy7, #outsidewhy8, #outsidewhy9, #outsidewhy10, #outsidewhy11').fadeToggle('slow');
});

$('#portfolio').click(function(port){    
$('#outsideport, #outsideport2, #outsideport3, #outsideport4, #outsideport5, #outsideport6, #outsideport7, #outsideport8, #outsideport9, #outsideport10, #outsideport11').fadeToggle('slow');
});

$('#contact').click(function(con){    
$('#outsidecon, #outsidecon2, #outsidecon3, #outsidecon4, #outsidecon5, #outsidecon6, #outsidecon7, #outsidecon8, #outsidecon9, #outsidecon10, #outsidecon11').fadeToggle('slow');
});


}); 

例如，当点击函数con时，它应该淡出函数about、whyus和port，而淡出con

---

另一个例子是，单击函数about时，会淡出函数whyus、port和con，而淡入正在单击的函数about。

首先，不要害怕使用类

例如，为每个子项指定一个

class=“outside”

然后，为4个函数项中的每一个都指定一个唯一的类。例如，将您的

#outside，#outside 2，#outside 3….

全部设置为

class=“outside 1”

而你的

#outsidewhy，#outsidewhy2…

都是

class=“oustside2”

然后为所有顶级点击链接设置一个

class=“click link”

那么你需要做的就是

$('.click-link').click(function() {

    var whichone = $(this).attr('id'); // gets the id of the click-link that was clicked

    $('.outside').fadeOut(800); // this fades out them all

    if (whichone === 'about') {

        $('.outside1').fadeIn(800); // but this will fadein the ones that you want, depending on which link was clicked

    }

    else if (whichone === 'whyus') {

        $('.outside2').fadeIn(800);

    }

    etc

    etc

});

远不是完美的答案，我们将非常感谢您的改进

---

jQuery

---

首先创建一个提琴，并展示如何使函数褪色？您应该使用类，而不是花一些时间将其全部组合在一起，但它会使单击的函数div仍处于顶部。我需要他们淡出，如果另一个元素被点击。忘记添加感谢您的回应！我在搞些事情，看看能不能让它工作。

$(document).ready(function () {
    $('#about').click(function (e) {
        e.preventDefault();
        $('.notme').not('#outside').fadeOut('fast');
        $('#outside').fadeIn('slow');
    });
    $('#whyus').click(function (e) {
        e.preventDefault();
        $('.notme').not('#outsidewhy').fadeOut('fast');
        $('#outsidewhy').fadeIn('slow');
    });
    $('#portfolio').click(function (e) {
        e.preventDefault();
        $('.notme').not('#outsideport').fadeOut('fast');
        $('#outsideport').fadeIn('slow');
    });
    $('#contact').click(function (e) {
        e.preventDefault();
        $('.notme').not('#outsidecon').fadeOut('fast');
        $('#outsidecon').fadeIn('slow');
    });
});