slideUp如何在jQuery中工作？我正在尝试制作自己的slideRIght

问题描述

|| 我已经在jquery中查看了幻灯片的源代码...

// 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的width属性的slideLeft或slideRight。     

解决方法

        您可以使用：

$(\'div\').animate({ width: \'show\' }); // slideLeft

$(\'div\').animate({ width: \'hide\' }); // slideRight

jsFiddle上的演示。     ,        您可以对

slideRight

和

slideUp

做同样的事情：

$.fn.slideRight = function(options) {
    var s_opt = {
        speed: \"slow\",callback: null
    }

    $.extend(s_opt,options);
   return this.each(function() {
        $(this).effect(\"slide\",null,s_opt.speed,s_opt.callback);
   });
};

小提琴：http://jsfiddle.net/maniator/eVUsH/