用cookie取消jquery动画的问题 [英] Problem with canceling a jquery animation with a cookie

问题描述

我想让一个带有jquery动画的每次会话只运行一次.我已经弄清楚了如何使用Klaus Hartl的cookie插件来执行此操作，但是，当第二次调用该页面时，元素会闪烁.我的印象是$ .fx.off应该使jquery跳到动画的结束状态，但是元素短暂闪烁，这就像在跳动动画一样，而不仅仅是跳到结束状态真的很快.当退出浏览器时，cookie将丢失，然后动画将再次播放-这就是我想要发生的事情.我只希望动画每个会话播放一次.我可以在网上找到一些不错的教程，以了解如何使cookie切换CSS状态，但是我想要一些可以防止jquery动画运行从而使最终状态可见的东西.

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.

这是我的测试页:

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>

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

Any thoughts would be great! Thanks!

推荐答案

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();
  }
 });

为什么不喜欢这个?

这篇关于用cookie取消jquery动画的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！