jQuery:动画删除CSS属性

Question

我在视觉上使用jQuery"折叠"一些DOM元素(通过将它们的宽度缩小到0px并逐渐淡出它们),如下所示:

$(".slideoutmenu").animate({ width: 0, opacity: 0 }, function() { $(this).hide(); }); 

这些元素的宽度可以变化,但是文档通过CSS正确布局而不设置特定宽度.

通常,要重新显示这些元素,我可以简单地执行以下操作:

$(".slideoutmenu").stop().show().css({ width: '', opacity: 1 });

但是,我想反向动画这些元素(淡入和展开).

通常我会用类似的东西来做这件事:

$(this).children(".slideoutmenu").stop().show().animate({ width: 250, opacity: 1 });

所以这是一个明显的尝试:

$(this).children(".slideoutmenu").stop().show().animate({ width: "", opacity: 1 });

但这不起作用.

最终,这里的问题是上面例子中固定的"250"数字.这不起作用,因为宽度是可变的.我需要结合在css setter中使用空字符串的结果和"animate"......但我无法弄清楚如何做到这一点.我试过用'undefined','null','-1',''替换"250",我搜索了谷歌......无济于事.

我理解我可能会对用户隐藏的元素做一些测量技巧 - 但我无法想象这不是一个相当普遍的问题 - 所以我希望有一种"标准"的方法来做到这一点,或者说它是建立在一些如何,我只是不知道它.

谢谢阅读.

跟进:

基于迈克尔的善意回应,我整理了一个小而快的脏插件,这样我就能完成内联.(也许有人可以扩展插件的想法并使其更好)

这是插件:

(function( $ ){

  $.fn.cacheCss = function( prop ) {  

    return this.each(function() {

      var $this = $(this);


        if (prop instanceof Array)
        {
            for (var pname in prop)
            {
                if ($this.data('cssCache-' + prop[pname]) != undefined)
                    continue;

                $this.data('cssCache-' + prop[pname], $this.css(prop[pname]));
            }
        }
        else
        {
            if ($this.data('cssCache-' + prop) != undefined)
                return $this;

            $this.data('cssCache-' + prop, $this.css(prop));
        }

        return $this;

    });

  };


  $.fn.revertCss = function(settings, prop, animated) {  

    if (settings == null)
        settings = {};

    return this.each(function() {

      var $this = $(this);

        if (prop instanceof Array)
        {
            for (var pname in prop)
            {
                if ($this.data('cssCache-' + prop[pname]) != undefined)
                    settings[prop[pname]] = $this.data('cssCache-' + prop[pname]).replace(/px$/, "");               
            }
        }
        else
        {
            if ($this.data('cssCache-' + prop) != undefined)
                settings[prop] = $this.data('cssCache-' + prop).replace(/px$/, "");
        }

        if (!animated)
          return $this.css(settings);

        return $this.animate(settings);

    });

  };

})( jQuery );

以下是我能够修改代码以使用它的方法:

设置css属性的原始行:

$(".slideoutmenu").animate({ width: 0, opacity: 0 }, function() { $(this).hide(); }); 

被替换为:

$(".slideoutmenu").cacheCss('width').animate({ width: 0, opacity: 0 }, function() { $(this).hide(); }); 

现在,".cacheCss('width')"在我执行动画之前缓存了css属性的值.

我不得不"撤消"这些变化:

$(this).children(".slideoutmenu").stop().show().animate({ width: 250, opacity: 1 });

被这取代:

$(this).children(".slideoutmenu").stop().show().revertCss({ opacity: 1 }, 'width', true);

现在,".revertCss(...)"将使用缓存设置来恢复我的宽度属性(动画!)

我也做了插件接受数组,所以你也可以这样做:

.cacheCss(['width', 'height'])

然后:

.revertCss(null, ['width', 'height'], true)

第三个参数控制是否动画还原.

如果你想要同时制作动画的其他属性(就像我之前的例子中的"不透明度"那样),你可以将它们作为第一个参数传递,就像将对象传递给.animate()函数一样.

我确定插头可以大大改进,但我认为将它扔出去可能会很好.

此外,还有一点 - 我必须在css值的末尾替换spurrious"px"...再次,我确信可能有更好的方法,但我只是使用标准的正则表达式.

Answer 1

您可以使用jQuery数据存储元素前动画的宽度:

$(".slideoutmenu").each(function(){
    $(this).data('width', $(this).css('width'));
    $(this).animate({ 
        width: 0, 
        opacity: 0 
    }); 
});

$(".slideoutmenu").each(function(){
    $(this).children(".slideoutmenu").stop().animate({ 
        width: $(this).data('width'), 
        opacity: 1 
    });
});