2017-08-12 187 views
4

遇到一个很奇怪的问题。试图运行fadeIn()但我收到错误“.fadeIn不是函数”。jQuery - “fadeIn不是函数”

我的代码:

body { 
 
    display:none; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <!-- Required meta tags --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 

 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
    <link rel="stylesheet" href="css/custom.css"> 
 
    </head> 
 
    <body> 
 
    Test 
 

 
    <!-- Optional JavaScript --> 
 
    <!-- jQuery first, then Popper.js, then Bootstrap JS --> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 

 
    <script type="text/javascript"> 
 
     $(document).ready(function(){ 
 
     $('body').fadeIn(); 
 
     }) 
 
    </script> 
 
    </body> 
 
</html>

错误消息:

"TypeError: $('body').fadeIn is not a function. (In '$('body').fadeIn()', '$('body').fadeIn' is undefined)" 

通过引导v4的测试,在Chrome和Safari本地测试。

回答

16

Bootstrap 4的默认模板使用jQuery的“超薄”版本,它不包含许多功能。您需要切换回使用更多功能的版本。例如:

body { 
 
    display:none; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <!-- Required meta tags --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 

 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
    <link rel="stylesheet" href="css/custom.css"> 
 
    </head> 
 
    <body> 
 
    Test 
 

 
    <!-- Optional JavaScript --> 
 
    <!-- jQuery first, then Popper.js, then Bootstrap JS --> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 

 
    <script type="text/javascript"> 
 
     $(document).ready(function(){ 
 
     $('body').fadeIn(); 
 
     }) 
 
    </script> 
 
    </body> 
 
</html>

+0

([jquery的正常和苗条包之间的区别] https://stackoverflow.com/questions/35424053/what-are -jquery-normal-and-slim-package- –

+0

不知道有什么区别,切换的文件,这帮助我解决了我面临的灯箱问题。非常感谢 – Mena

-1

使用$('body').show();$('body').hide();代替