2

フィドルの更新: http://jsfiddle.net/zQLQV/

コンテンツローテーターを作成するためにこのスクリプトを書いています。まず、すべてのスライドでデフォルトの高さを取得してから、高さ 0 に設定します。トリガー クリック (スライド ID で href を使用) で、開いているすべてのスライドが高さ 0 になり、トリガーされたスライドは自動高さにアニメーション化されます。

自動高さを除いて、すべてが計画どおりに機能します。コンテンツの量に関係なく、すべてのスライドの高さは 0 のままです。唯一の可視性は 850 の min-height です。

どんな助けでも大歓迎です。

$(function() { 

    $(".slide").each(function() {
        slideHeight = $(this).height();
    });

    $(".slide").css({ "height": "0", "opacity": "0"});


    $(".side-nav ul li a").click(function(event) {
        event.preventDefault();
        currentHref = $(this).attr('href');
        $(".slide").stop().animate({"opacity": "0", "height": "0px", "min-height": "0px"}, 100);
        $(currentHref).stop().animate({"opacity":"1", "min-height": "850px", height: slideHeight + "px"}, 450);

    });                     

});
4

1 に答える 1

0

私はあなたの問題がここにあると信じています：

$(".slide").each(function() {
    slideHeight = $(this).height();
});

何が起こっているのかというと、slideHeight変数は最後のスライドの高さに設定されているだけでした。最短のスライドをリストの最後の場所に移動すると、他のスライドのコンテンツが切り取られるのがわかります。

スライド自体のデータプロパティに各スライドの高さを保存するようにフィドルを更新しました。

HTML：

<div class="side-nav">
  <ul>
    <li><a href="#one-slide">1</a></li>
    <li><a href="#two-slide">2</a></li>
    <li><a href="#three-slide">3</a></li>
  </ul>
</div>

<div class="slide" id="one-slide">asdf<br>asdf<br>asdf<br>asdf<br></div>
<div class="slide" id="two-slide">asdf<br>asdf<br>asdf<br></div>
<div class="slide" id="three-slide">asdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdf<br></div>

Javascript：

$(function() { 

$(".slide").each(function() {
    $(this).data('slideHeight', $(this).height());
});

$(".slide").css({ "height": "0", "opacity": "0"});


$(".side-nav ul li a").click(function(event) {
    event.preventDefault();
    var targetContainer = $($(this).attr('href'));
    currentHref = $(this).attr('href');
    $(".slide").stop().animate({"opacity": "0", "height": "0px"}, 100);
    targetContainer.stop().animate({"opacity":"1", height: targetContainer.data('slideHeight') + "px"}, 450);
});                        

});​
于 2012-09-26T18:43:03.483 に答える