jquery tabslideout plugin and want to detect when div slide in and out

Question

i am working with jquery tabslideout plugin. it wporks fine but i want to detect when tabslideout plugin slide in and out. if i could detect then i can call another routine. no idea is coming to my head to determine how to capture when tabslideout div slide-in and out. so please guide me. thanks

here is my code

<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

The plugin has no way to inform you it has happened however I have modified the plugin to allow you to do so.

My change to the plugin was to add a callback function (you can provide one in the options) to run after the animation has completed.

Here is an example

Only change is to provide a function to call when it slides in or out. like so

$(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');
            }
        });

    });

Note you will need to use the version I modified on the JsFiddle.

Hope this helps

UPDATE

Op requested further information regarding my changes to the plugin.

Firstly I added I added two new properties to the default settings which were empty functions.

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

Then I put that value into the callback of animate method in the code.

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

The user is then able to provide their own implementation of the method to override the default.

If you are going to require more hooks to handle code then you may consider looking at firing and listening to custom events in lieu of using callbacks.