jQuery自定义向右滑动显示隐藏效果的方法slideLeft()，slideRight()

向下滑动显示slideDown()和向上滑动隐藏slideUp()是jquery内置的常用方法，现在再自定义增加一组向右滑动显示slideRight()和向左滑动隐藏的方法slideLeft()，其实也是一个简单的jquery插件。

代码如下：

jQuery.fn.slideLeft = function( speed, callback ) {  
    this.animate({  
        width : "hide",  
        paddingLeft : "hide",  
        paddingRight : "hide",  
        marginLeft : "hide",  
        marginRight : "hide"  
    }, speed, callback );  
};  
jQuery.fn.slideRight = function( speed, callback ) {  
    this.animate({  
        width : "show",  
        paddingLeft : "show",  
        paddingRight : "show",  
        marginLeft : "show",  
        marginRight : "show"  
    }, speed, callback );  
};

语法示例

示例一

$("#show").click(function(){
  $("#box").slideRight();
});
$("#hide").click(function(){
  $("#box").slideLeft();
});

示例二

$('#nav li').mouseenter(function(){	
	if($(this).find('li').length > 0){
		$(this).children('ul').stop().slideRight('fast');
	}
}).mouseleave(function(){
	if($(this).find('li').length > 0){
		$(this).children('ul').stop().slideLeft('fast');
	}
});

和slideDown()、slideUp()的语法一样。

PS：可以根据这个思路举一反三，比如自定义向左滑动显示，向右滑动隐藏的方法代码等。