3

jQuery Tools Scrollableを使用して、いくつかの YouTube クリップを含むいくつかのパネルをスクロールしています。ぎくしゃくしたアニメーションを避けるために、移行中にそれらを非表示にしたいと思います。

マークアップ:

<div id="panel_items">
    <div id="wrap">
        <div class="event">
            <div class="header">Event 1</div><!-- Header is always displayed -->
            <div class="youtube">youtube clips</div><!-- hide during transition, then show -->
        </div>
        <div class="event">
            <div class="header">Event 2</div>
            <div class="youtube" style="display: none">More youtube clips</div>
        </div>
    </div>
</div>

現在の JS:

$("#panel_items").scrollable({
  onBeforeSeek: function() { console.log("hide .child .youtube"); }, 
  onSeek: function() { console.log("Show child .youtube"); }        
});

#panel_itemsおまけの質問:現在のパネルの高さに合わせての高さを自動的に設定するにはどうすればよいですか ( .event)?

4

3 に答える 3

1

そんなことしてみた？:

var api = jQuery("#panel_items").data("scrollable");

api.onBeforeSeek(function() {

    jQuery(". youtube").fadeOut(100);

});
于 2011-08-10T20:53:26.193 に答える
1

このようなものがうまくいくかもしれません（テストされていません）：

$("#panel_items").scrollable({
   onBeforeSeek: function() { this.getItems().css({'visibility': 'hidden'}); }, 
   onSeek: function() { this.getItems().css({'visibility': 'visible'});}
});
于 2011-06-14T15:16:26.770 に答える
0

フェードインとフェードアウトはカウントされません。いくつかのテストの後、これは機能します：

onBeforeSeek: function (e,i) {
    $(".items").animate({opacity:0},400);
},
onSeek: function (e,i) {
    $(".items").animate({opacity:1},400);
}
于 2012-09-05T15:30:02.027 に答える