我看过
source code in jquery for slideup ……
// Generate shortcuts for custom animations
jQuery.each({
slideDown: genFx("show",1),slideUp: genFx("hide",slidetoggle: genFx("toggle",fadeIn: { opacity: "show" },fadeOut: { opacity: "hide" },fadetoggle: { opacity: "toggle" }
},function( name,props ) {
jQuery.fn[ name ] = function( speed,easing,callback ) {
return this.animate( props,speed,callback );
};
});
我知道这是函数的简写,所以我逐渐介绍GenFX
function genFx( type,num ) {
var obj = {};
jQuery.each( fxAttrs.concat.apply([],fxAttrs.slice(0,num)),function() {
obj[ this ] = type;
});
return obj;
}
然后是fxAttrs
fxAttrs = [
// height animations
[ "height","marginTop","marginBottom","paddingTop","paddingBottom" ],// width animations
[ "width","marginLeft","marginRight","paddingLeft","paddingRight" ],// opacity animations
[ "opacity" ]
],
但我无法弄清楚这段代码是如何工作的,或者我将如何创建影响HTML宽度属性的slideLeft或slideRight.
解决方法
您可以使用:
$('div').animate({ width: 'show' }); // slideLeft
$('div').animate({ width: 'hide' }); // slideRight
演示于jsFiddle.