Jquery淡入淡出功能？

Jquery新手，不知道在这种情况下如何添加淡入淡出功能

function toggleDivs(n) 
{
    // Hide all divs
    var elDivs = document.getElementById('divBlock').getElementsByTagName('div');
    for (var i = 0; i < elDivs.length; i++) 
    {
        elDivs[i].setAttribute('style', 'display:none;');
    }

    // Show chosen div
    var elChosen = document.getElementById('project_' + n);
    elChosen.setAttribute('style', 'display:block;');
}

---

我想这个页面的功能与淡入淡出的内容在divblock。当按钮位于divblock下方时，屏幕向上移动。在小屏幕上，这意味着手动向上滚动以查看内容。如果可能的话，在Jquery id中，最好像活动按钮的边框一样更改颜色，以指示divblock显示的内容

如果您使用jQuery，可以将其减少很多

$('#divBlock div, #project_'+n).fadeToggle();

function toggleDivs(n) {
    // Hide all divs
    $("#divBlock div").hide();

    // Show chosen div
    $("#project_" + n).show();
}

要使其淡入淡出，而不仅仅是显示和隐藏，请在显示和隐藏后的括号内添加时间（以毫秒为单位）。比如说

$("#divBlock div").fadeOut(500); /* take half a second to hide */

如果您想对效果进行更多控制，请查看

.animate（）

额外资源

编辑 我相信您正在寻找回调函数——它在函数完成后调用函数。在这种情况下，您将在所有其他div都使用

fadeOut

完成后执行

fadeIn

“project\n”

function toggleDivs(n) {
    // Hide all divs
    $("#divBlock div").fadeOut(500, function(){

        // Show chosen div after others are done fading out
        $("#project_" + n).fadeIn(500);

    });

}

---

若你们想要淡入淡出效果，只需使用，或者，它会显示和隐藏元素。您不需要创建另一个函数

function toggleDivs(n) 
{
      $("#divBlock div").fadeOut(); //hiding
      $("#project_" + n).FadeIn(); //showing
}

---

如果尚未添加核心jQuery文件，则需要在核心jQuery文件之外添加jQuery UI。没有一个修复程序“正确”工作，我知道您正在做什么。但是，当一个淡入淡出，另一个淡出淡出时，两个都会在一瞬间显示为块，这会破坏网站。你们很快就回答了，我真是个傻瓜，我还想在这个功能发生时添加一个向上滚动的功能。我将添加html+css，这样你就可以看到我正在尝试做什么。好的，现在全部修复。谢谢你的帮助！我在包含此部分的div的id中添加了一个滚动函数和href，可以很好地将其滚动到顶部。函数切换divs（n）{//Hide all divs$（“#divBlock div”）.fadeOut（500）.delay（500）；//Show selected div$（“#project"+n）.fadeIn（500）.delay（500）}@Alex'Fonz'Bennett我相信您正在寻找一个回调函数-它比添加延迟更干净、更容易管理。

/* Take 1.5 seconds to hide the div by shortening the height to 0 */ 
$("#divBlock div").animate({ height: "hide"}, 1500);

function toggleDivs(n) {
    // Hide all divs
    $("#divBlock div").fadeOut(500, function(){

        // Show chosen div after others are done fading out
        $("#project_" + n).fadeIn(500);

    });

}

function toggleDivs(n) 
{
      $("#divBlock div").fadeOut(); //hiding
      $("#project_" + n).FadeIn(); //showing
}