1

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

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

4

3 回答 3

2

如果您使用的是 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);

其他资源

编辑

我相信您正在寻找回调函数 - 这会在函数完成后调用一个函数。在这种情况下，您将fadeIn在所有其他 div 都使用fadeOut.

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

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

    });

}
于 2013-04-28T00:41:32.673 回答
1 
$('#divBlock div, #project_'+n).fadeToggle();
于 2013-04-28T00:37:04.987 回答
0

如果你想要淡入淡出效果，只需使用fadeIn()、fadeOut()或fadeToggle()，它会显示和隐藏元素。你不需要创建另一个函数。

function toggleDivs(n) 
{
      $("#divBlock div").fadeOut(); //hiding
      $("#project_" + n).FadeIn(); //showing
}
于 2013-04-28T00:47:38.040 回答