使用 cookie 取消 jquery 动画时出现问题

发布于 2024-10-14 22:37:16 字数 976 浏览 4 评论 0原文

我想让 jquery 动画在每个会话中仅使用 cookie 运行一次。我已经弄清楚如何使用 Klaus Hartl 的 cookie 插件来做到这一点，但是，当第二次调用该页面时，元素会闪烁。我的印象是 $.fx.off 应该使 jquery 跳转到动画的结束状态，但是，元素短暂闪烁，就像不是只是跳转到结束状态，它只是播放动画真的很快。当浏览器退出时，cookie 会消失，然后动画会再次播放——这就是我想要发生的事情。我只想让动画在每个会话中播放一次。我可以在网上找到一些关于如何使 cookie 切换 CSS 状态的好教程，但我想要一些能够简单地阻止 jquery 动画运行以便最终状态可见的东西。

这是我的测试页面：

http://ianmartinphotography.com/test-site/index- cookies-04.html

这是我的代码：

<script type="text/javascript">
var welcome=$.cookie('welcome'); if(welcome == 'ran') {$.fx.off = !$.fx.off;}; 
</script>


<!--slider-->
<script type="text/javascript">
$(window).load(function(){$(".imwpj")
.animate({"top": "+=200px"}, 0)
.fadeIn(2000).delay(200).animate({"top": "+=295px"}, 1100, function() {
$('#sub-fader').fadeIn(1500); });
$.cookie('welcome', 'ran');
}); 
</script>

任何想法都会很棒！谢谢！

原文

I'd like to make a jquery animation run only once per session with a cookie. I've sort of figured out how to do this with Klaus Hartl’s cookie plugin, but, when the page is called the second time, the elements flash. I'm under the impression that $.fx.off is supposed to make jquery jump to the end state of the animation, but, the elements flash briefly, it's like instead of just jumping to the end state, it just plays through the animation really quickly. The cookie will drop out when the browser is quit, and then the animation will play again--that's what I want to have happen. I just want the animation to play once per session. I can find some good tutorials online about how to make a cookie switch CSS states, but I want something that will simply prevent the jquery animation from running so that the end state is visible.

Here's my test page:

http://ianmartinphotography.com/test-site/index-cookies-04.html

Here's my code:

<script type="text/javascript">
var welcome=$.cookie('welcome'); if(welcome == 'ran') {$.fx.off = !$.fx.off;}; 
</script>


<!--slider-->
<script type="text/javascript">
$(window).load(function(){$(".imwpj")
.animate({"top": "+=200px"}, 0)
.fadeIn(2000).delay(200).animate({"top": "+=295px"}, 1100, function() {
$('#sub-fader').fadeIn(1500); });
$.cookie('welcome', 'ran');
}); 
</script>

Any thoughts would be great! Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏九 2024-10-21 22:37:16

var welcome=$.cookie('welcome'); 
 $(window).load(function(){
  if(welcome != 'ran') {
     $(".imwpj")
     .animate({"top": "+=200px"}, 0) // this is not necessary, you can use css("top", "200px")
     .fadeIn(2000).delay(200).animate({"top": "+=295px"}, 1100, function() {
     $('#sub-fader').fadeIn(1500); });
     $.cookie('welcome', 'ran');
  } else {
     $(".imwpj").css("top", "495px");
     $("#sub-fader").css("display", "block");  //or .show();
  }
 });

为什么不喜欢这样呢？

var welcome=$.cookie('welcome'); 
 $(window).load(function(){
  if(welcome != 'ran') {
     $(".imwpj")
     .animate({"top": "+=200px"}, 0) // this is not necessary, you can use css("top", "200px")
     .fadeIn(2000).delay(200).animate({"top": "+=295px"}, 1100, function() {
     $('#sub-fader').fadeIn(1500); });
     $.cookie('welcome', 'ran');
  } else {
     $(".imwpj").css("top", "495px");
     $("#sub-fader").css("display", "block");  //or .show();
  }
 });

why not like this?

回复收藏 0 原文

~没有更多了~