onBeforeSeek and onSeek toggle child div using jQuery Scrollable?

Question

I'm scrolling some panels which contain some YouTube clips using jQuery Tools Scrollable. I'd like to hide them during the transition to avoid a jerky animation.

Markup:

<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>

Current JS:

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

Bonus question: How can I automatically set the height of #panel_items to match the current panel height (.event)?

Answer 1

Something like this might work (untested):

$("#panel_items").scrollable({
   onBeforeSeek: function() { this.getItems().css({'visibility': 'hidden'}); }, 
   onSeek: function() { this.getItems().css({'visibility': 'visible'});}
});  

Answer 2

Did you try it like that? :

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

api.onBeforeSeek(function() {

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

});

Answer 3

fadein and fadeout throws off the count. After some testing, this works:

onBeforeSeek: function (e,i) {
    $(".items").animate({opacity:0},400);
},
onSeek: function (e,i) {
    $(".items").animate({opacity:1},400);
}