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

Question

我有一个元素页面,根据用户的交互,每个元素都可以通过给定的函数进行动画处理:

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

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

基本上寻找将所有元素恢复到原始css状态的方法,无论它们是否被jquery动画操作.

谢谢-

编辑:

刚刚意识到我需要做的就是用'show'替换'toggle':

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

在任何元素上调用此元素都将确保元素在这种情况下恢复为可见元素.但是,请参阅下面的Nick的答案,以获得更普遍适用的方法.

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