1

jquery animate オプションを使用して、スライド div の効果を実現しようとしています。親の div を上に「スライド」させることはできますが、スライダーの後ろに div を表示する際に問題が発生します。

私の問題を示すために、このjsfiddleを作成しました。

photoOptions div のコメントを外してみてください。この div を非表示にしようとしているので、親 div がスライドされたときにのみ表示されます。

<div class="photoWrapper">
   <!-- <div class="photoOptions"> This is your data. </div>-->
   <div class="photoHolder">
     Image Here
   </div>
   <div class="photoMeta">More data here</div>
   <div class="photoCredits">
     <a href="#" class="trigger">Trigger</a>
   </div>
</div>

コード

jQuery.fn.blindToggle = function(speed, easing, callback) {
    var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
    return this.animate({
        marginTop: parseInt(this.css('marginTop')) < 0 ? 0 : -h
    }, speed, easing, callback);
};

$(document).ready(function(){
    $(".trigger").click(function(){
        $('.photoHolder').blindToggle('slow');
    });
});

現在の CSS:

.photoWrapper {
    width:200px;
    border: solid 1px #ddd;
}
.photoHolder {
    border: solid 1px #eee;
    width:200px;
    height:266px;
}
.photoOptions {
    padding-top: 50px;
    height: 266px;
    width: 200px;
    background: #eee;
    position:absolute;
}

どうすればこれを達成できるかについて何か考えはありますか?

4

2 に答える 2

2

ブラウザーは、DOM 内の場所に基づいて要素をレンダリングします。要素が DOM 内の別の要素の前にある場合、その要素の下にレンダリングされます。

このデフォルトの動作を変更するには、CSS ルールを使用する必要があります。div でz-indexlower を定義すると、その下にレンダリングされます。z-index.photoOptions

このフィドルに見られるように

またz-index、絶対配置された要素は通常のフローではレンダリングされないため、値の処理が異なる場合があることに注意してください。

于 2013-08-05T15:36:16.667 に答える
0

コールバックを on に.blindToggle()するとその効果を得ることができますが、CSS を編集して、それが表示されるようにし、非表示.photoCreditsで開始する必要があります。.photoOptions

$(document).ready(function () {
    $(".trigger").click(function () {
        $('.photoHolder').blindToggle('slow', function () {
            $(".photoOptions").show();
        });
    });
});

.photoOptions {
    padding-top: 50px;
    height: 266px;
    width: 200px;
    background: #eee;
    position:absolute;
    display:hidden;
}
于 2013-08-05T15:37:55.557 に答える