Else If 条件逻辑运算符在 Jquery 中不起作用

Question

当浏览器窗口大小不同时，我在设置动画时遇到问题，换句话说，使动画具有响应性。

在下面的代码中，只有第一个 If 块有效。 else If 块不起作用，没有语法错误。

感谢您的帮助。

$(window).scroll(function(){
var firstAnimation = function() {
  $('#in-view').delay(300).css("display","block").animate({          
      opacity:1,
      right: -150
  },'slow');
};

var h4Animation = function() {
$('#hr1').delay(500).animate({
    width: '60%'
},'200');
};


if ($(window).width() <= 768) {
   if ($(window).scrollTop() > 200 ) {
       h4Animation();
       firstAnimation();       
   } else if ($(window).width() >= 769) { 
       if ($(window).scrollTop() > 100) {
          h4Animation();
          firstAnimation();            
       }
   }
}   
});

Answer 1

你的其他人在错误的地方：

if ($(window).width() <= 768) {
   if ($(window).scrollTop() > 200 ) {
       h4Animation();
       firstAnimation();       
   } else if ($(window).width() >= 769) { // how can window width be both <= 768 and >= 769?
       if ($(window).scrollTop() > 100) {
          h4Animation();
          firstAnimation();            
       }
   }
}   
});

改为：

if ($(window).width() <= 768) {
   if ($(window).scrollTop() > 200 ) {
       h4Animation();
       firstAnimation();       
   }
}
else if ($(window).width() >= 769) { // the condition isn't really necessary since if it is not <= 768 it will be >= 768
       if ($(window).scrollTop() > 100) {
          h4Animation();
          firstAnimation();            
       }
   }
}   
});