0

私は本当にこれに行き詰まっています...

div で tinyscrollbar.js プラグインを使用しています。その div 内には、段落を含むビューポートと、その段落の高さを 500px と 1000px の間で切り替えるボタンがあります。tinyscrollbar を動的に更新して、新しい高さに気づき、それ自体を修正するにはどうすればよいですか? (他に「box_content review」の div が 9 つあると想像してください)

ウェブサイトが提案する tinyscrollbar_update メソッドを使用してみましたが、うまくいかないようです。誰にもアイデアはありますか？

ありがとう

HTML -

<div id="scrollbar3">
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
    <div class="viewport">
    <div class="overview">
    <div class="box_content review">
    <h5 class="reviewTitle">Review title: D90 is the best camera</h5>
    <img src="../../images/gen_rating_5.png" />
    <div class="topCont">
    <img src="../../images/profile.png" />
    <p class="pros">Pros - LightWeight, Quality, Performance, Durable, Reliable  </p>
    <p class="cons">Cons - Expensive, Interchangable Parts </p>
    </div>
    <p class="reviewContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book... &nbsp <span><i><a class="readMore">read more</a></i></span></p>
</div>
</div>
</div>
</div>

Jクエリ -

$('#scrollbar3').tinyscrollbar({ sizethumb: 45 });
    $(".readMore").toggle(function(){
        $(this).parent().parent().parent().animate({height:530},400);
        $('#scrollbar3').tinyscrollbar_update();
    },function(){
        $(this).parent().parent().parent().animate({height:76},400);
        $('#scrollbar3').tinyscrollbar_update();
    });
4

2 に答える 2

1

わかりましたので、最後にコンテンツを事前に追加し、親divにoverflow:hiddenと固定高さを与えてコンテンツを「非表示」にしました。次に、高さを「自動」に変更しています。

于 2013-04-14T08:53:10.367 に答える
1

tinyscrollbar を更新すると、アニメーションは終了しません。アニメーションが終了したら、完全なコールバック関数を使用してtinyscrollbar を更新します。

$(this).parent().parent().parent().animate(
    { height:530 }, 
    400, 
    function() {
        $('#scrollbar3').tinyscrollbar_update();
    }
);
于 2013-05-12T14:38:04.890 に答える