Problem with canceling a jquery animation with a cookie

问题

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!

回答1:

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?

来源：https://stackoverflow.com/questions/4856469/problem-with-canceling-a-jquery-animation-with-a-cookie