function slide(userOptions) {
    op = { //Preset values of the parameter
        'CSS_selector':"#fadeanim ul li 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':"0px", //The top margin on hover. As there is no way to get the :hover pseudo class so we need to mention this
        'slideIn_time':400, //Time taken to slide up on hover in
        'slideOut_time':250 //Time taken to slide down on hover out
    };
    
    op.initial_margin = $(op.CSS_selector).css("margin-top"); //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({marginTop:op.initial_margin}); //Sets the Top margin of the image to 10px. This is useful if the button was under any animation
            $(this).animate({marginTop:op.hover_margin},op.slideIn_time); //Now animates the button to the defined hovered margin                
        },
        function() { //This is the hover out function
            $(this).animate({marginTop: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() {
        slide();
    }
);