onBeforeSeek и onSeek toggle дочерний div с помощью jQuery Прокручиваемый?

Question

Я прокручиваю несколько панелей, которые содержат некоторые клипы YouTube, используя jQuery Tools Scrollable. Я бы хотел скрыть их во время перехода, чтобы избежать резкой анимации.

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> 

Текущий JS:

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

Бонус вопрос: Как я могу автоматически установить высоту #panel_items в соответствии с текущей высоты панели (.event)?

Answer 1

Что-то подобное может работать (непроверенные):

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

Answer 2

Пробовали ли вы это, как это? :

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

api.onBeforeSeek(function() { 

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

}); 

Answer 3

fadein и fadeout выкидывает счет. После некоторых испытаний это работает:

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