javascript - 将 jquery 动画还原为原始 css 状态

Question

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

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

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

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

谢谢-

编辑:

刚刚意识到我需要做的就是将“切换”替换为“显示”:

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

在任何元素上调用此方法将确保元素在这种情况下恢复为可见。但是，请参阅 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);
  });
}