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'); 

然后，用户可以提供自己的实现来替代默认的方法。

如果你打算要求更多的钩子来处理代码，那么你可以考虑看看射击和听自定义事件，而不是使用回调。