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 が終了した後で「project_n」を実行します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 に答える