Jquery - "Fadein Is Not a Function"

jQuery - fadeIn is not a function

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>

getting fadeIn is not a function although I did add jQuery to my HTML file

It looks like you're loading the slim bundle, which according to the downloads page:

...excludes the ajax and effects modules.

fadeIn and fadeOut would fall into that category. You may need to replace your jQuery bundle with one containing more capabilities.

jQuery Uncaught TypeError: undefined is not a function when using fadeIn();

tp is a plain javascript object and it does not has a function called .fadeIn()

Try to wrap it inside $() to make it a jquery object then do,

$(tp).fadeIn('slow');

or better use jquery's id selector to grab the element,

$("#page_home").fadeIn('slow');

JQuery fadeIn() not working despite correct log messages

You are missing a ; after display: none adding that back in seems to fix it, here is a working example: https://jsfiddle.net/nbekm981/1

The reason the missing ; broke it was because it was setting display: none background-image: url("../img/city_topdown_blurred.png"); which is invalid. Because it was invalid it went with the default display: block; (which is automatically visible). So your fade in was already complete before it started in a way.

Hiding and showing div with fadeIn and fadeOut not working

You are using jQuery, so use jQuery:

$("#click").click(function(){
   var x = $("#left-column").css('display');
   console.log(x);
   if(x=='block'){
      $("#left-column").fadeOut();
   }else{
      $("#left-column").fadeIn();
   }
});

Note that you do not need to return the instruction to hide the div, just hide it.

You also want to test the value of x, not that there IS a value in x.

$("#click").click(function(){
   var x = $("#left-column").css('display');
   console.log(x);
   if(x=='block'){
      $("#left-column").fadeOut();
   }else{
      $("#left-column").fadeIn();
   }
});

#wrapper{display:flex;}
#wrapper>div {flex:1;}

#left-column{background:blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <div id="wrapper">
    <div id="left-column" class="col-3">Stuff</div>
    <div id="test">
        <button class="btn btn-danger" id="click">Button</button>
    </div>
</div>

Jquery fadeIn() not working

You should hide the div by default if you want to fade it in, otherwise it is already showing and fading in won't do anything. If that's the case, your html should look like this:

<div class="container" id="fade" style="display: none;">
    //some other buttons, divs, etc
</div>

jquery fadeIn not working

Unless the element is hidden, no fade will occur, you need something like this:

$(".warning").hide().fadeIn(4000);

You can give it a try here, also $() is deprecated in 1.4+, you should use $(document) or the shorter version, like this:

$(function() {
  $(".warning").hide().fadeIn(4000);
});

The alternative is to give the element a display: none initially but this breaks for JS-disabled users, or if JavaScript errors occur preventing the fade, so you may want to steer clear of this approach.

jquery fadein() not working with hide() and display:none

You Hide the parent element - $("#tutorialPages"), so it doesn't matter what will happen to its child elements, they won't be shown.

$("#tutorialPages") should always be shown, and show/hide only the children elements, or add $("#tutorialPages").show() to the first click event.

Fadein not working

You have two issues. Firstly your use of the load event handler on the div element will never be fired. Secondly you're setting the display of the element which is immediately over-riding the fade animation.

You can also tidy up the logic slightly by providing text() with a function to toggle the message being displayed and chaining the delay with setTimeout() so that the delay and fade are intrinsically linked. Try this:

var msg1 = 'Message 1';var msg2 = 'Message 2';$("#mb-test").html(msg1); swapmessages();
function swapmessages() {    $("#mb-test").fadeOut(2000, function() {        $(this).text(function(i, t) {            return t.trim() == msg1 ? msg2 : msg1;        }).fadeIn(2000);        setTimeout(swapmessages, 2000);    });}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="mb-holder" class="mb">    <div class="mb-align">        <span id="mb-test"></span>    </div></div>

Jquery - "Fadein Is Not a Function"