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

jQuery：动画删除CSS属性

1 个答案: