jquery - リスト項目のフェードアウト/フェードイン

Question

これは、スタッフメンバー (#staffDirectory) に関連付けられた小さな画像の縦方向の順序付けられていないリストがある「Meet Our Staff」ページ用です。ユーザーが表示されているものとは異なるスタッフメンバーをクリックすると、現在の大きなリストアイテム (メンバーに関する画像と情報が含まれ、クラス「staffSelected」が割り当てられ、div #staffMember に表示されます) がフェードアウトします。クラスを失い、対応するリスト項目 (ユーザーが #staffDirectory でクリックしたもの) を取得し、その項目をフェードインして、「staffSelected」クラスを追加します。

現在起こっていることは、オーバーラップがあり、新しいリスト項目が古いリスト項目の右側に一時的に表示されることです (ただし、これは、#staffDirectory リストから 2 回目以降にクリックしたときにのみ発生します。最初はうまく機能します)。そのため、移行はスムーズではありません。この問題は、newMember 変数の宣言や、fadeIn メソッドでのその使用に対処する必要があると思います。

JSとCSSは以下です。前もって感謝します。

JS:

$(document).ready(function()
{
    $("#staffDirectory ul li").click(function()
    {
        var index = $("#staffDirectory ul li").index(this);
        var newMember = null;
        newMember = $("#staffMember ul li").get(index);

        $(".staffSelected").fadeOut(500, function()     
        {
            $(newMember).fadeIn(500).addClass('staffSelected');
        });

    });

});

CSS:

#staffContainer
{
    margin-top: 45px;
}
#staffDirectory
{
    margin: 25px;
    float: left;
}
#staffDirectory ul
{
    list-style:none;
}
#staffDirectory ul li
{
    opacity: 0.5;
}

#staffDirectory img{
    width: 55px;
    cursor: pointer;
}

#staffDirectory li:hover{
    opacity: 0.7;
}

.selectedMember {
    opacity: 1.0 !important;
}

#staffMember{

}

#staffMember ul{

list-style: none;
}

#staffMember li{
display: inline;
}

.staffMemberImage {
    float: left;
    margin-right: 30px;
}

.staffName {
color: #7F0037;
font-variant: small-caps;
font-size: 20px;
font-weight: bold;
text-align: center;
}

.staffSelected {
    display: inherit;
}

#staffMember li:not(.staffSelected) {
    display: none;
}

HTML:

<div id="staffDirectory">
                <ul>
                    <li class="selectedMember"><img src="img/silhouette.jpg"></li>
                    <li><img src="img/silhouette.jpg"></li>
                    <li><img src="img/silhouette.jpg"></li>
                    <li><img src="img/silhouette.jpg"></li>
                    <li><img src="img/silhouette.jpg"></li>             
                    <li><img src="img/silhouette.jpg"></li> 
                </ul>
            </div>
            <div id="staffMember">
                <ul>
                    <li class="staffSelected">
                        <img src="img/silhouette.jpg" class="staffMemberImage">
                        <p class="staffName">Jane Doe 1</p>
                        <p class="staffDesc">

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam tincidunt mauris eu risus.
    Vestibulum auctor dapibus neque.    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam tincidunt mauris eu risus.
    Vestibulum auctor dapibus neque.    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam tincidunt mauris eu risus.
    Vestibulum auctor dapibus neque.
                        </p>
                    </li>

                    <li>
                        <img src="img/silhouette.jpg" class="staffMemberImage">
                        <p class="staffName">Jane Doe 2</p>
                        <p class="staffDesc">

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam tincidunt mauris eu risus.
    Vestibulum auctor dapibus neque.    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam tincidunt mauris eu risus.
    Vestibulum auctor dapibus neque.    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam tincidunt mauris eu risus.
    Vestibulum auctor dapibus neque.
                        </p>
                    </li>
</ul>

</div>

編集: Firebug から (画像を投稿しますが、このサイトは初めてです):

<div id="staffMember">
<ul>
<li class="" style="opacity: 1; display: none;">
<li class="" style="display: none; opacity: 1;">
<li class="" style="display: none; opacity: 1;">
<li class="" style="display: none; opacity: 1;">
**<li class="staffSelected" style="display: list-item; opacity: 1;">
<li class="staffSelected" style="display: list-item; opacity: 1;">**
<img class="staffMemberImage" src="img/silhouette.jpg">
<p class="staffName">Jane Doe</p>
<p class="staffDesc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. </p>
</li>
</ul>
</div>

score 1 · Accepted Answer

staffSelectedそのため、古いものからも削除する必要があります。私は ajgiv の jsfiddle を取り、それが機能するように変更しました:

jsフィドル

JavaScript:

$(document).ready(function () {
    $("#staffDirectory ul li").click(function () {
        var index = $("#staffDirectory ul li").index(this);
        var newMember = null;
        newMember = $("#staffMember ul li").get(index);

        $(".staffSelected").stop().fadeOut(500).removeClass('staffSelected');

        setTimeout(function () {
            $(newMember).stop().fadeIn(500).addClass('staffSelected');
        }, 500);
    });
});

score 0 · Accepted Answer

setTimeout を使ってみましたか？

$(".staffSelected").fadeOut(500, function() {
        setTimeout(function() {
          $(newMember).fadeIn(500).addClass('staffSelected');
        }, 500);
    });

編集:これはあなたが望むものを達成しますか? http://jsfiddle.net/agroth3/MC6B2/

jquery - リスト項目のフェードアウト/フェードイン

2 に答える 2

Related

Reference