单击一个时使用javascript淡出元素?

时间:2014-05-04 17:19:11

标签: javascript jquery

我使用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。

另一个例子,点击它的函数将淡出函数whyus,port和con,同时淡入大约被点击。

2 个答案:

答案 0 :(得分:0)

首先,不要害怕上课。

例如,为每个子项目提供class="outside"

然后,还为4个功能项中的每一个提供一个唯一的类。例如,将#outside, #outside2, #outside3....所有类class="outside1"

提供给您

和您的#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

});

答案 1 :(得分:0)

Working fiddle

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


的jQuery

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