有没有一种简单的方法来反转这个 jQuery 动画？

Posted 2023-05-08

【中文标题】有没有一种简单的方法来反转这个 jQuery 动画？

【英文标题】：Is there a simple way to reverse this jQuery animation?

【发布时间】：2015-04-15 01:10:11

【问题描述】：

我是使用 jQuery 制作动画的新手（我也在使用 WordPress）。恐怕创建一堆动画功能真的会使网站变得沉重并陷入困境。我想尽可能减少函数的数量，所以我真的很想知道扭转这组函数的最省力的方法是什么？甚至可以不完全重写动画吗？我只需要在滚动时以相反的方向运行它们。

<script>
jQuery(document).ready(function ($) 
    $("#sprite").animate(bottom: '0px', 400, 'linear', function () 
        $("#sprite").css(
            'background-image': 'url(http://localhost:8888/wordpress/wp-content/themes/DigitalBrent/media/images/Warp-Sprite.png)',
            'height': '50px',
            'width': '90px',
            'left': '300px',
            'bottom': '80px'
        );
        setTimeout(function () 
            $("#sprite").css(
                'background-image': 'url(http://localhost:8888/wordpress/wp-content/themes/DigitalBrent/media/images/test-sprite.png)',
                'height': '120px',
                'width': '96px'
            );
        , 80);
    );
);
</script> 

【参考方案1】：

将原始 css 存储在变量中，然后将 css 设置回原始。

var orgCss = $("#sprite").css();
//do stuff here...

$("#sprite").css(orgCss);

【讨论】：

我喜欢这个主意。我没有意识到我能做到这一点。我试试看。