jQuery - "fadeIn is not a function"

Question

Running into a very strange problem. Trying to run fadeIn() but I am getting the error ".fadeIn is not a function".

My code:

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>

Error message:

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

Using Bootstrap v4 beta, tested locally on Chrome and Safari.

DavidG · Accepted Answer · 2017-08-12 01:49:43Z

93

The default template for Bootstrap 4 uses th "slim" version of jQuery which doesn't include many functions. You need to switch back to using a more featured version. For example:

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>

answered Aug 12, 2017 at 1:49

DavidG

120k13 gold badges232 silver badges239 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Louys Patrice Bessette Over a year ago

Differences between normal and slim package of jquery

Mena Over a year ago

Never knew there was a difference, switched files and that helped me solve an issue i was facing with Lightbox. Many thanks

zarpilla · Accepted Answer · 2020-10-09 11:40:41Z

5

The slim version is enough with a small CSS:

jQuery("#toTop").addClass('fade-in');

and

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

answered Oct 9, 2020 at 11:40

zarpilla

3623 silver badges6 bronze badges

Comments

ITekin · Accepted Answer · 2020-11-18 17:41:38Z

0

You could also make use of JQuery-Animation:

$(document).ready(function() {
    $("element-you-want-to-fadeIn").animate(
                        { opacity: 1 },
                        "slow",
                         function()
                           { 
                              alert("animation complete!");
                           }
                         );
                        });

answered Nov 18, 2020 at 17:41

ITekin

1

1 Comment

Ricky Levi Aug 17 at 11:00

but animate is not a function either :/

Boris Michourin · Accepted Answer · 2023-03-30 17:12:06Z

0

In my case, the error disappeared when I set the runtime of the appearance.

$("#successMessage").fadeIn(300);

answered Mar 30, 2023 at 17:12

Boris Michourin

414 bronze badges

Collectives™ on Stack Overflow

jQuery - "fadeIn is not a function"

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related