将 jquery 动画恢复为原始 css 状态

Question

我有一个元素页面，根据用户交互，每个元素都可能被给定的函数动画化：

function slideAndFade(id){
    $(id).animate({opacity: 'toggle', width: 'toggle'}, 500);
}

我想创建一个重置函数，将所有元素带回页面。通过上面的切换功能运行所有元素将不起作用，因为当前隐藏的元素将被显示，当前显示的元素将被隐藏。

本质上是在寻找将所有元素恢复到其原始 css 状态的方法，无论它们是否已被 jquery 动画操作。

谢谢-

编辑：

刚刚意识到我需要做的就是将“toggle”替换为“show”：

function revertSlideAndFade(id){
    $(id).animate({opacity: 'show', width: 'show'}, 500);
}

在任何元素上调用 this 将确保元素在这种情况下恢复为可见。但是，请参阅下面的Nick's answer，了解更普遍适用的方法。

Answer 1

如果您可以识别所有可能传递给此函数的元素，例如他们有一个类 .toggleElem，您可以使用它来存储页面加载时的值并在需要时恢复，如下所示：

$(function() {
  $(".toggleElem").each(function() {
    var $this = $(this);
    $.data(this, 'css', { opacity: $this.css('opacity'), 
                          width: $this.css('width') });
  });
});

然后您可以在以后的任何时候恢复它们：

function restore() {
  $(".toggleElem").each(function() {
    var orig = $.data(this, 'css');
    $(this).animate({opacity: orig.opacity, width: orig.width}, 500);
  });
}