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

问题描述

我查看了 jquery中用于滑动的源代码 ...

// 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 );
    };
});

我知道这是函数的简写，所以我继续介绍GenFX

I understand that this is shorthand for functions, so I folllow through to GenFX

function genFx( type, num ) {
    var obj = {};

    jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice(0,num)), function() {
        obj[ this ] = type;
    });

    return obj;
}

然后是fxAttrs

and then fxAttrs

fxAttrs = [
        // height animations
        [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],
        // width animations
        [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],
        // opacity animations
        [ "opacity" ]
    ],

但是我只是不知道这段代码是如何工作的，或者我将如何创建影响HTML的width属性的slideLeft或slideRight.

but I just can't figure out how this code works, or how I would go about creating a slideLeft or slideRight that affects the width attribute of the HTML.

推荐答案

您可以使用:

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

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

在 jsFiddle 上进行演示.

这篇关于slideUp()如何在jQuery中工作?我正在尝试制作自己的slideRIght()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！