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

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

1 个答案: