function slide2(userOptions) {
    op = { //Preset values of the parameter
        'CSS_selector':"#leftnav ul li.left img", //The CSS selection of the image where you want the sliding effect
        'initial_margin':"0px", //The initial maring-top of the image
        'hover_margin':"35px", //The top margin on hover. As there is no way to get the :hover pseudo class so we need to mention this
        'slideIn_time':200, //Time taken to slide up on hover in
        'slideOut_time':600 //Time taken to slide down on hover out
    };
    
    op.initial_margin = $(op.CSS_selector).css("margin-left"); //We get the initial margin from the CSS file
    
    op = $.extend({}, op, userOptions); //We extend the user Options using jQuery
     
     
    $(op.CSS_selector).hover( 
        function() { //This is the hover in function
            $(this).stop(); //Stops any animation being done on the button
            $(this).css({marginLeft:op.initial_margin}); //Sets the Top margin of the image to 10px. This is useful if the button was under any animation
            $(this).animate({marginLeft:op.hover_margin},op.slideIn_time); //Now animates the button to the defined hovered margin                
        },
        function() { //This is the hover out function
            $(this).animate({marginLeft:op.initial_margin},op.slideOut_time); //Animates the top margin to the initial value
        }
    )
}
 
 
$(document).ready( //Now call the function when document is ready
    function() {
        slide2();
    }
);