2

ちょっとした例を作成しました。ご覧ください。 http://jsfiddle.net/bWTwL/ 次のようなパネルが必要です。 X (クリック) > コンテンツのフェードアウト > スライド パネル右

今、私は家、私についてなどの7つのリスト項目を持っています。ユーザーがリスト項目をクリックすると、そのリスト項目の特定のコンテンツ(家、私についてなど)がフェードインする必要があります。パネルが既に表示されている場合は、コンテンツのみがクリック時にフェードイン/アウトする必要があります。私はそれらのそれぞれに対して各関数を書くことを考えましたが、それは非常に長く厄介なコードになるでしょう.

html5 data-attribute のようなものを考えましたが失敗しました。理解を深めるために、ここで同じ効果を確認してください: http://www.unpezvivo.com/proyectos/themeforest/cspp/02/#

前もって感謝します。

4

3 に答える 3

5

これらの線に沿ったものはうまく機能します。

1.CSS

div.panel {
    display:none;
    position: absolute;
    top: 0;
    width:70%;
    right:0%;
    height: 100%;
    z-index: 3;
    margin: 0;
    overflow:hidden;
    background-color:black;
}
.panel div.content {
    display:none;
    font-family:arial;
    color:white;
    padding:50px;
    overflow:hidden;
}
span.close {
    position:absolute;
    right:10px;
    top:15px;
    cursor:pointer;
}​

2.マークアップ

<ul id="menu">
    <li><a id="home" href="#">Home</a></li>
    <li><a id="about-me" href="#">About Me</a></li>
</ul>

<div class="panels">
    <div class="panel home">
        <div class="content">
            <span class="close">X</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam</p>
        </div>
    </div>
    <div class="panel about-me">
        <div class="content">
            <span class="close">X</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam</p>
        </div>
    </div>
</div>

3.jQuery

$(document).ready(function() {
    var $panels = $('.panels > .panel');
    $('#menu > li').on('click', 'a', function() {
        $panels.filter('.'+this.id).trigger('togglePanel');
    });
    $panels
        .on('togglePanel', function(){
            var $this           =   $(this)
              , $activePanels   =   $panels.filter(':visible').not($this);
            if ($activePanels.length) {
                $activePanels
                    .one('panelHidden', function(){
                        $this.is(':visible')
                        ? $this.trigger('hidePanel')
                        : $this.trigger('showPanel');
                    })
                    .trigger('hidePanel');
            } else {
                $this.is(':visible')
                ? $this.trigger('hidePanel')
                : $this.trigger('showPanel');
            }
        })
        .on('hidePanel', function(){
            var $this = $(this);
            $this.find('.content').fadeOut(500, function() {
                $this.animate({
                    'width': 'hide'
                }, 1000, function(){
                    $this.trigger('panelHidden');
                });
            });
        })
        .on('showPanel', function(){
            var $this = $(this);
            $this.animate({
                'width': 'show'
            }, 1000, function() {
                $this.find('.content').fadeIn(500, function(){
                    $this.trigger('panelShown');
                });
            });
        });
    $panels.find('.content .close').on('click', function() {
        $(this).closest('.panel').trigger('togglePanel');
    });
});​

私はpub/sub patternを使用しました。これにより、作業が簡単になります。冗長コードを最小限に抑えます。そして、ワークフローは従うのがより簡単です。

カスタム イベントには名前空間を使用することを強くお勧めします(例: 、、、togglePanel... )。このコードではそれを行いませんでした。これは、初心者のスクリプト作成者にとってはすでに複雑であり、このコードをさらに進めるための宿題としてあなたに残されているからです。hidePanelshowPanel

于 2012-04-08T10:20:45.773 に答える
2

それらをすべて同じクラス (例: myclass) にしてから、次を使用しますthis。

$('.myclass').on('click', function() {
    $(this).animate({
        'width': 'show'
    }, 1000, function() {
        $(this).fadeIn(500);
    });
});

実際、上記のコードをテストしたところ、フェードインしている要素がクリックしている要素と同じではないため、2番目thisの要素が正しい要素を参照していないため、機能しません。クリックされているものとのDOM関係（子など）を使用して、フェードインしたいものを参照できる必要があります。(これを参照してください。)

したがって、次のことができます。

$('.myclass').on('click', function() {
    $(this).animate({
        'width': 'show'
    }, 1000, function() {
        $(this).children(.class2).fadeIn(500);
    });
});

これが機能するには、メニューとパネルを分離するのではなく、別の HTML 設定が必要です。CSS を使用して、必要に応じて要素を .class2 に配置できます。

または、すべてに一意の ID を指定して、メニュー項目 #M1 がパネル項目 #P1 をトリガーし、#M2 が #P2 をトリガーするなど...

[シェフの答えは私のものよりもはるかに優れています!]

于 2012-04-08T10:07:08.227 に答える
0

特定の CSS セレクターではなく、イベント関数内で $(this) を使用します。これは、トリガーされたオブジェクトを参照します。

$(this).fadeOut();

コンマ区切りでセレクターと組み合わせて使用​​できます。

$(".slide", this).fadeOut();
于 2012-04-08T10:06:43.090 に答える