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)?
Thank you.