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

我希望这个页面能够在divblock中对内容进行淡入淡出。并且当按钮位于divblock下方时屏幕向上移动。在小屏幕上，这意味着如果要查看内容，请手动向上滚动。如果可能，在Jquery id中，理想情况下就像活动按钮的边框一样，可以更改颜色，指示divblock显示的内容。

Answer 1

如果你正在使用jQuery，你可以将其减少很多。

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

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

为了使其淡化而不仅仅是显示和隐藏，在show和hide之后的括号内添加一个时间（以毫秒为单位）。例如

$("#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“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);

    });

}

Answer 2

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

Answer 3

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

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

Jquery淡化功能？

3 个答案:

修改