jquery - 如何根据页面滚动位置为对象设置动画

Question

我目前正在使用以下代码根据当前滚动位置显示/隐藏内容：

$(window).scroll(function () {
    if ($(window).scrollTop() >= 409) {
        $('.cliocont').fadeTo('slow', 1.0);
    } else if ($(window).scrollTop() <= 409) {
        $('.cliocont').fadeTo('slow', 0.5);
    }
});

这段代码似乎不起作用是有原因的吗？每当 else if 语句代码工作时，但只要添加它，内容就不会出现或隐藏。

谢谢，内森·尼亚梅尔

Answer 1

添加.stop()以防止动画淡入淡出错误
和布尔标志var io以防止不必要的动画：

jsBin 演示

var $cc = $('.cliocont'),
    io  = false; // flag // compare booleans

$(window).scroll(function () {
  
   var is409 = $(window).scrollTop() >= 409; // boolean
   if (io != is409){
      io = is409;
      $cc.stop().fadeTo(800, is409?1.0:0.5);
   }
 
}); 

is409 ? 1.0 : 0.5是一个条件运算符if，它是语句的简写；
boolean ? ifTrue : else ;

Answer 2

我会说这更合适，这包括两个动画的时间锁定 - 请删除 console.log(...) 调用：

            <script type="text/javascript">

            var animateTrainer1 = true;
            var animateTrainer2 = true;
            $(window).scroll(function () {

                var scrollTop = $(window).scrollTop();

                if (scrollTop > 500 && animateTrainer1) {
                    animateTrainer1 = false;
                    console.log("animated trainer 1");
                    Animations.toPosition("#trainer1", 0, -100, 4000);
                }

                if (scrollTop > 800 && animateTrainer2) {
                    animateTrainer2 = false;
                    console.log("animated trainer 2");
                    Animations.toPosition("#trainer2", 100, 340, 4000);
                }

            });

        </script>