jquery tabslideout插件，並希望檢測div滑入和滑出

Question

我正在使用jquery tabslideout插件。它wporks罰款，但我想檢測當tablideout插件滑入和滑出。如果我能檢測到，那麼我可以調用另一個例程。當tablideout div滑入和滑出時，沒有任何想法可以確定如何捕獲。 所以請指導我。在這裏感謝

是我的代碼

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script> 

<script type="text/javascript"> 
$(function(){ 
$('.slide-out-div').tabSlideOut({ 
    tabHandle: '.handle',      //class of the element that will become your tab 
    pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css 
    imageHeight: '122px',      //height of tab image   //Optionally can be set using css 
    imageWidth: '40px',      //width of tab image   //Optionally can be set using css 
    tabLocation: 'left',      //side of screen where tab lives, top, right, bottom, or left 
    speed: 300,        //speed of animation 
    action: 'click',       //options: 'click' or 'hover', action to trigger animation 
    topPos: '200px',       //position from the top/ use if tabLocation is left or right 
    leftPos: '20px',       //position from left/ use if tabLocation is bottom or top 
    fixedPosition: false      //options: true makes it stick(fixed position) on scroll 
}); 

}); 

</script> 

<style type="text/css"> 
.slide-out-div { 
    padding: 20px; 
    width: 250px; 
    background: #ccc; 
    border: 1px solid #29216d; 
}  
</style> 

<div class="slide-out-div"> 
    <a class="handle" href="http://link-for-non-js-users.html">Content</a> 
    <h3>Contact me</h3> 
    <p>Thanks for checking out my jQuery plugin, I hope you find this useful. 
    </p> 
    <p>This can be a form to submit feedback, or contact info</p> 
</div> 

Answer 1

的插件有沒有辦法通知你但它已經發生了我已經修改了插件，允許你這樣做。

我對該插件的改變是在動畫完成後添加一個回調函數（您可以在選項中提供一個）來運行。

這裏是一個example

唯一的變化是提供一種功能，當它的幻燈片或向外打電話。像這樣

$(function(){ 
     $('.slide-out-div').tabSlideOut({ 
      tabHandle: '.handle',      //class of the element that will become your tab 
      pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css 
      imageHeight: '122px',      //height of tab image   //Optionally can be set using css 
      imageWidth: '40px',      //width of tab image   //Optionally can be set using css 
      tabLocation: 'left',      //side of screen where tab lives, top, right, bottom, or left 
      speed: 300,        //speed of animation 
      action: 'click',       //options: 'click' or 'hover', action to trigger animation 
      topPos: '200px',       //position from the top/ use if tabLocation is left or right 
      leftPos: '20px',       //position from left/ use if tabLocation is bottom or top 
      fixedPosition: false,      //options: true makes it stick(fixed position) on scroll 
      onSlideOut: function() { 
       alert('Opened'); 
      }, 
      onSlideIn: function() { 
       alert('Closed'); 
      } 
     }); 

    }); 

請注意，您將需要使用我在JsFiddle上修改的版本。

希望這有助於

UPDATE

運算要求對我的更改插件的進一步信息。

首先，我添加了兩個新的屬性添加到默認設置這是空功能。

onSlideOut: function() {}, 
onSlideIn: function() {} 

然後我把這個值放到代碼中的animate方法的回調中。

//Square Bracket for emphasis only 
obj.animate({top:'-' + properties.containerHeight}, settings.speed,[settings.onSlideIn]).removeClass('open'); 
obj.animate({top:'-3px'}, settings.speed,[settings.onSlideOut]).addClass('open'); 

然後，用戶可以提供自己的實現來替代默認的方法。

如果你打算要求更多的鉤子來處理代碼，那麼你可以考慮看看射擊和聽自定義事件，而不是使用回調。