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”，并且我在 Google 上进行了搜索……但无济于事。

我知道我可能会对用户隐藏的元素做一些测量技巧 - 但我无法想象这不是一个相当普遍的问题 - 所以我希望有一个“标准”的方法来做到这一点，或者它是以某种方式构建的，我只是不知道。

感谢阅读。

跟进:

基于 Michael 的善意回应，我组装了一个快速而简单的小插件，这样我就可以完成这个内联。 (也许有人可以扩展插件的想法并使其变得更好)

这是插件:

(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 值的末尾替换虚假的“px”……我再次肯定可能有更好的方法，但我只是使用了标准的正则表达式.

Answer 1

您可以使用 jQuery data 存储元素预动画的宽度:

$(".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 
    });
});