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':"15px", //The top margin on hover. As there is no way to get the :hover pseudo class so we need to mention this
'slideIn_time':600, //Time taken to slide up on hover in
'slideOut_time':400 //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({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() {
slide({'slideIn_time':300});
}
);