2017-02-27 103 views
0

我在浏览器窗口大小不同时设置动画时有问题,换句话说,动画响应。否则如果有条件的逻辑运算符不工作在Jquery

在下面的代码中,只有第一个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();    
     } 
    } 
} 
}); 
+0

我没有看到你的代码中的任何问题,所以你可以张贴的jsfiddle向我们展示你的问题究竟是什么? –

+0

正确缩进代码后 - 您确定elseif的位置正确吗?我好像elseif应该在第一级 - 绑定到window.height而不是第二级。 – Christoph

+0

正如我在下面的评论中所述。我忘了关闭第一个条件。无论如何,感谢您的帮助。 – FabMon

回答

0

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

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

由于我之前对代码进行了更改,因此我忘记了关闭第一个条件。问题现在已经解决了。顺便说一句,我认为浏览器会混淆相同的值768小于或大于所以我添加了一个像素,但它是多余的。感谢MikeS的帮助 – FabMon