有没有简单的方法来反转这个 jQuery 动画?
Is there a simple way to reverse this jQuery animation?
我刚开始使用 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>
将原始的 css 存储在一个变量中,然后将 css 设置回原始的。
var orgCss = $("#sprite").css();
//do stuff here...
$("#sprite").css(orgCss);
我刚开始使用 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>
将原始的 css 存储在一个变量中,然后将 css 设置回原始的。
var orgCss = $("#sprite").css();
//do stuff here...
$("#sprite").css(orgCss);