将jquery动画还原回原始css状态 [英] Reverting jquery animations back to original css states

问题描述

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

I've got a page of elements, each of which, depending on user interaction, may be animated away by the given function:

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

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

I want to create a reset function that brings all the elements back onto the page. Running all the elements through the toggle function above won't work, because currently hidden elements will be shown, and currently shown elements will be hidden.

基本上寻找将所有元素还原为原始css状态的方法，而不管它们是否由jquery动画处理。

Essentially looking for way to revert all elements to their original css states, regardless of whether they've been acted upon by jquery animation.

感谢 -

编辑：

所有我需要做的是用'show'替换'toggle'：

Just realized all I need to do is replace 'toggle' with 'show':

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

在任何元素上调用此函数将确保元素被还原为可见案件。但是，请参阅下面的 Nick的回答了解更广泛的适用方法。

Calling this on any element will ensure the element is reverted back to visible in this case. However, see Nick's answer below for a more generally applicable approach.

推荐答案

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

If you could identify all the elements that might be passed into this function, say they had a class .toggleElem you could use that to store the values on page load and restore then when needed, like this:

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

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

Then you could restore them at any point later:

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

这篇关于将jquery动画还原回原始css状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！