每次页面加载后更改 jquery 动画方向答案

【问题标题】：alter jquery animation direction after every page load每次页面加载后更改 jquery 动画方向
【发布时间】：2011-12-21 12:49:16
【问题描述】：

我有一个 jquery 动画，其中一张图片从信封上滑落。

现在我希望该动画在页面再次加载后向后播放。

含义：图片回到信封。然后，如果再次加载，图片会再次出现，等等......

这怎么可能？

这里又是整个代码。还不能自己回答我的问题，评论的迹象太少了。

var div = $("#karte2");
function runIt() {
 div.show("slow");
 div.animate({"marginTop": '-790px'}, 1000);
 div.animate({"marginTop": '-280px'}, 2000);now it works
}
runIt();
var div = $('#karte1');
$({
z: ~~div.css('zIndex')
 // ~~ to get an integer, even from non-numerical values like "auto"
        }).animate({
            z: -1000
        }, {
            step: function() {
                div.css('zIndex', ~~this.z);
            },
            duration: 2000
        });

【问题讨论】：

现在它可以按我的意愿工作了。我找到了一个解决方案，我可以在其中为 z-index 设置动画。页面加载后，图片的 z-index 再次降低。可能我之前在 jquery 中有太多的 z-indexes 设置。现在我把它们全部删除了。 var div = $('#karte1'); $({ z: ~~div.css('zIndex') // ~~ 得到一个整数，即使是像 "auto" 这样的非数值 }).animate({ z: -1000 }, { step: function () { div.css('zIndex', ~~this.z); }, 持续时间: 2000 });

标签： jquery load reverse

【解决方案1】：

您必须使用某种服务器端语言来保存动画的状态。 JS 将在每次页面加载时重置，因此如果您使用的是 PHP，则可以设置一个 SESSION 变量，并根据该变量的值确定动画的方向。

或者，但这更难恕我直言，您可以使用 JS cookie： http://www.w3schools.com/js/js_cookies.asp

【讨论】：

【解决方案2】：

如果加载意味着整个页面刷新，那么您必须保留一些有关要执行的操作的服务器端状态，并动态更改视图以呈现该动画。

另一方面，如果您使用 AJAX，只需使用一个变量来存储信封的“状态”并相应地进行动画处理。

【讨论】：