Jquery淡入淡出功能？

Question

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

HTML

<div id="divBlock">
<div id="project_1" style="display:block;">
    <figure>
        <a href="#" rel="lightbox">
            <img src="#"  align="left" width="420" height="514" alt="#" />
        </a>
    </figure>
    <article>
        <h4>#</h4>
        <p>Lorem</p>
    </article>
</div>

<div id="project_2" style="display:block;">
    <figure>
        <a href="#" rel="lightbox">
            <img src="#"  align="left" width="420" height="514" alt="#" />
        </a>
    </figure>
    <article>
        <h4>#</h4>
        <p>Lorem</p>
    </article>
</div>
</div>

<a onClick="toggleDivs(1);">Category 1</a>
<a onClick="toggleDivs(2);">Category 2</a>

CSS

#divBlock{
    height:519px;
    width:920px;
    margin-top:130px;
    padding:50px;
}
#divBlock figure{
    float:left;
    border:7px solid #bdd3e4;
    width:420px;
    background:#fff;
    padding:2px;
}
#divBlock figure a{
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    height:514px;
    width:420px;
}
#divBlock article{
    height:514px;
    width:460px;
    float:right;
}
#divBlock article h4{
    font-size:26px;
    letter-spacing: -1px;
    text-shadow: 0px 1px 1px #FFF;
    padding:15px 0px;
    font-weight: bold;
    font-family: 'Roboto Condensed', sans-serif;
    color:#7da8cb;
}
.tech-skills{
    margin-top:20px;
    border-top: 4px dashed rgb(189,211,228);
}
.contentnav{
    width:907px;
    clear: both;
    border-top: 4px dashed rgb(189,211,228);
    padding:10px 5px;
    margin:0px auto;
}
.contentnav  a{
    padding: 0;
    border: 0;
    display:block;
    height:221px;
    width:190px;
    padding:2px;
    background:#fff;
    float:left;
    border:7px solid #bdd3e4;
    margin-bottom:25px;
    margin-right:25px;
    cursor:pointer;
}
.tech-skills-image{
    list-style:none;
}
.tech-skills-image li{
    display:block;
    float:left;
    padding:0px 5px;
    height:120px;
    width:90px;
}    
.tech-skills-image span{
    width:90px;

    float:left;
    text-align:center;
    padding:5px 0px;
}
.tech-skills-image img {
    float:left;
}

我希望此页面能够对 div block 内的内容进行淡入淡出。当按钮位于 div block 下方时，屏幕会向上移动。在小屏幕上，这意味着手动向上滚动才能查看内容。如果可能的话，在 Jquery id 中最好像事件按钮的边框一样改变颜色，指示 divblock 正在显示哪些内容。

Answer 1

如果您使用 jQuery，则可以大大减少此操作。

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()

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

其他资源

• http://api.jquery.com/fadeIn/
• http://api.jquery.com/fadeOut/
• http://api.jquery.com/animate/
• http://api.jquery.com/hide/
• http://api.jquery.com/show/
• http://api.jquery.com/toggle/

编辑

我相信您正在寻找回调函数 - 这会在函数完成后调用函数。在这种情况下，在所有其他 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);

    });

}