slideUp（）如何在jQuery中工作？我试图使自己的slideRIght（）

我已经看了看source code in jquery for slideup ...slideUp（）如何在jQuery中工作？我试图使自己的slideRIght（）

// Generate shortcuts for custom animations 
jQuery.each({ 
    slideDown: genFx("show", 1), 
    slideUp: genFx("hide", 1), 
    slideToggle: genFx("toggle", 1), 
    fadeIn: { opacity: "show" }, 
    fadeOut: { opacity: "hide" }, 
    fadeToggle: { opacity: "toggle" } 
}, function(name, props) { 
    jQuery.fn[ name ] = function(speed, easing, callback) { 
     return this.animate(props, speed, easing, callback); 
    }; 
});

我明白，这是速记的功能，所以我folllow通过对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" ] 
    ],

但我就是想不通这个代码是如何工作的，或我怎么会去创造一个slideLeft或幻灯片正确的影响HTML的宽度属性。

来源

2011-05-27 digiguru

这是'slideUp'的更好的链接：http://james.padolsey.com/jquery/#v=1.2.6&fn=jQuery.fn.slideUp – Neal 2011-05-27 15:24:05

你可以做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/

来源

2011-05-27 15:26:48 Neal

这是一个很难阅读。您允许用户传递选项，但您称为效果“幻灯片”。这是从哪里来的，如果我想向左滑动，那可能吗？ – digiguru 2011-06-01 06:56:04

您可以使用：

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

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

演示在jsFiddle。

来源

2011-05-27 15:30:05 MacMac

我喜欢这种技术，因为它不使用jQuery UI，但是我尝试让它在另一个方向上反转时遇到了实际困难（在本演示中向右滑动 - 在隐藏http：// jsfiddle时尝试向右滑动。 net/bj4pm/4 /） – digiguru 2011-06-02 12:06:16

slideUp（）如何在jQuery中工作？我试图使自己的slideRIght（）

回答

相关问题