Как работает slideUp () в jQuery? Я пытаюсь сделать свой собственный слайдрайт () - PullRequest
Новая
       15

Как работает slideUp () в jQuery? Я пытаюсь сделать свой собственный слайдрайт ()

8 голосов
/ 27 мая 2011

Я посмотрел исходный код в jquery для slideup ... 

// 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 

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 или slideRight, которые влияют на атрибут width в HTML.

Ответы [ 2 ]

3 голосов
/ 27 мая 2011

Вы можете использовать: 

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

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

Демо на jsFiddle .

1 голос
/ 27 мая 2011

Вы можете сделать то же самое с 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/

...