What could be causing my Jquery fade effect to not function properly?

I'm new to incorporating Jquery into my website and I'm facing an issue with getting the first row of pictures to fade in (upwards) when scrolling. Despite my efforts, they are not behaving as expected. Any guidance on how to resolve this?

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags always come first -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">


        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/animate.css">
        <link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
        <link rel="stylesheet" href="font-awesome/css/font-awesome.css">

    </head>
    <body>
        <!-- HEADER -->
        <section id="header">

            <h1 class="name">Jessica Shae</h1>


            <div class="container heading">
                <div class="row">

                    <div class="col-md-4">
                        <img src="img/7.jpg" class="display">
                    </div>
                    <div class="col-md-4">
                        <img src="img/2.jpg" class="display">
                    </div>
                    <div class="col-md-4">
                        <img src="img/9.jpg" class="display">
                    </div>

                    <div class="row">
                        <div class="col-md-12 text-xs-center">
                            <a href="#gallery"<i class="fa fa-chevron-down fa-3x" aria-hidden="true"></i></a> 

                </div>
            </div>


        </section>

        <!-- Gallery -->

        <section id="gallery">

            <h2 class="title">The Dark Room</h2>

            <div class="container photo-collection">
                <div class="row js--wp-1">

                    <div class="col-md-4 affect">
                        <img src="img/1.jpg" class="work">
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/10.jpg" class="work">
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/4.jpg" class="work">
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-4 affect">
                        <img src="img/18.jpg" class="work">
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/6.jpg" class="work">
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/8.jpg" class="work">
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-4 affect">
                        <img src="img/12.jpg" class="work">
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/11.jpg" class="work">
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/14.jpg" class="work">
                    </div>
                </div>

            </div>




        </section>




        <section class="contact-me">
            <div class="contact">
                <h3><span class="white">Conta</span><span class="black">ct Me</span></h3>
            </div>


            <form method="post" action="#" class="contact-form">
                <div class="row">
                    <div class="col span-1-of-3">
                        <label for="name">Name</label>
                    </div>
                    <div class="col span-2-of-3">
                        <input type="text" name="name" id="name" placeholder="Your name" required>
                    </div>     
                </div>
                <div class="row">
                    <div class="col span-1-of-3">
                        <label for="email">Email</label>
                    </div>
                    <div class="col span-2-of-3">
                        <input type="email" name="email" id="email" placeholder="Your email" required>
                    </div>     
                </div>
                <div class="row">
                    <div class="col span-1-of-3">
                        <label>Drop me a line</label>
                    </div>
                    <div class="col span-2-of-3">
                        <textarea name="message" placeholder="Your message"></textarea>
                    </div>     
                </div>
                <div class="row">
                    <div class="col span-1-of-3">
                        <label>&nbsp;</label>
                    </div>
                    <div class="col span-2-of-3">
                        <input type="submit" value="Send it!">
                    </div>     
                </div>



                </div>
            </form>
        </section>

    <section class="copywrite">
        <h6>Copywrite &copy; 2016 built by Temple Cerulean Naylor</h6>
    </section>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
    <script src="js/script.js"></script>
    </body>
</html>

CSS:

body {
    /*background-color: rgb(0, 0, 0);*/
    background: #070606;
}

/* HEADER */

.display {
    height: auto;
    width: 500px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-x: hidden;
    max-width: 100%;
    border: 4px solid white;
    border-radius: 6%;
}
... (CSS content goes here)

JavaScript:

$(document).ready(function() {

    // SCROLL ------------------------

    ... (JavaScript content goes here)

});
javascriptjqueryhtmlcss

Answer №1

Give this a shot:-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").fadeOut()
    });
    $(".btn2").click(function(){
        $("p").fadeIn();
    });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>

<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

</body>
</html>

otherwise

$('#message').hide().html("You clicked on a checkbox.").fadeIn('slow');

refer to:-Why doesn't jquery fadeIn() work with .html()?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The overflow of CSS text selection color spills beyond the boundaries of the box

I'm just starting to learn CSS and was wondering if there is a way to prevent the text selection color from extending into the 'gutter' (I believe that's the correct term) like shown here: It may seem trivial, but I've observed th ...

css

A guide on adding specific rows together in a list

I'm working with a grid that contains various items and I want to calculate the total of the val_itemservico column only for the selected rows, not all of them. How can I achieve this functionality? When the user clicks on the "Calculate" button, I n ...

javascriptpythonhtmldjango

Tips for monitoring transactions/events on a particular wallet with ethers.js?

Is there a method to monitor all transactions labeled as "mint" occurring on a designated wallet using ethers.js? While I am aware of the option to establish a filter for tracking a particular event signature, my aim is to keep tabs on all "mint" events, e ...

javascriptethereumethers.js

Developing a dynamic master-details view on a single page with ASP.NET MVC

This is a question related to design and technology. When using ASP.NET MVC, it is possible to create a simple application with two views: one master view that displays all records in tabular form in read-only mode, and another details view for creating n ...

jqueryajaxasp.net-mvcarchitecture

Issues with navigating sliders

I've encountered a problem with my slider arrows while following a YouTube tutorial. They are supposed to appear next to the picture and testimonial, but instead, they are showing up at the top. This issue wasn't present initially, but after enco ...

javascripthtmlcsssliderfrontend

Is there a way to code a checkbox within a dropdown menu?

I am seeking assistance in making this dynamic I am still learning Laravel and require some guidance on how to program a checkbox within a select dropdown. Here is the HTML form I have: <div class="container w60"> <div class="row pad_y_2 ...

phphtmllaravel-5

Is there a way to show multiple checkbox validation messages simultaneously with jquery implementation?

I am facing an issue with displaying validation messages simultaneously. Currently, only one message is being displayed: $('input').bind('click', function(){ var checkboxes_claimType = $("#field-claimType-wrapper").fin ...

jqueryvalidationcheckboxconditional-statements

Searching for a specific element in jQuery by querying a string

I have a situation where an ajax request is made to send text using the POST method to another PHP page. This PHP page then converts the text into markdown format and sends it back. Here's an example of what it looks like: "<p>Meep, meep, <e ...

javascriptphpjqueryajaxmarkdown

What is causing my Li elements to be unchecked in REACT?

Why is the 'checked' value not changing in my list? I'm currently working on a toDo app Here are my State Values: const [newItem, setNewItem] = useState(""); const [toDos, setToDos] = useState([]); This is my function: funct ...

javascriptreactjs

Creating automatic page additions using Node.js on Heroku?

Can you assist me with a challenge I'm facing? Currently, I am using node.js and heroku to deploy an application and each time I add a new post, I have to manually update my web.js file. This process was manageable when I had fewer pages, but now it&a ...

javascriptnode.jsheroku

Having trouble getting the JavaScript function to run when clicking a button inside a div or form?

Hey there, so I've got this scenario where I have a button nestled within a div. Take a look at the HTML snippet below: <div class="row"> <button type="button" id="submit">Send</button> </div> Prior to this button, there ...

javascriptjqueryhtmlcssgetelementbyid

the sequence in which a node executes a javascript function

Trying to update req.session.cart with new values for prod.quantity and prod.qtyCount in the shoppingCart field of order.save(). The issue is that orders are being saved with default quantity and qtyCount values, even though I'm setting cartProducts[ ...

javascriptnode.jsexpress-session

Use jQuery to place the initial 3 elements within a div

Currently, I am dynamically pulling content into li elements using ASP.NET. My goal is to wrap a specific div class around the first 3 li items in the list only. Here is an example: <ul class="wrapper"> <div cl ...

jqueryhtmlasp.netcss

Dropdown selection in Angular 4 with Firebase integration

I'm currently using Angular 4 in conjunction with Firebase to create a dropdown selector for a list of properties. Upon selecting a property from the dropdown menu, I expect the location of that property to be displayed in another input field below. ...

htmlangularjsangularfirebasefirebase-realtime-database

Bootstrap columns are still disrupted by large images even when they have reached their maximum width and height

I have been using bootstrap templates that allow users to create displays with images and text. I previously added max-width:100% and height:auto to the img CSS, thinking it would resolve issues with large images breaking the container. However, when inse ...

htmlcssbootstrap-4

Incorporate an HTTP Header into a Wicket Ajax Request

I am trying to include a custom HTTP header in all Ajax (XHR) requests made by Wicket. I attempted the following: $.ajaxSetup({ beforeSend: function(xhr) { xhr.setRequestHeader('X-My-Header', 'value'); } }); and $(doc ...

javascriptajaxhttpxmlhttprequestwicket

Efficient methods to reach the desired result using Selenium WebDriver promises

After working on a piece of code that utilizes Selenium WebDriver to retrieve the text of an element, I am wondering if there is a more concise way to accomplish this task? async function getText(driver, locator) { return await (await driver.findEleme ...

javascriptnode.jsselenium-webdriverpromiseasync-await

What is the best way to play a random song when the user clicks a button?

My goal is to develop a website where users can click on an image and have a random song play from a playlist. I currently have a functioning code that activates one song, but it fails when adding multiple songs to the mix. <html> <head> ...

javascriptjqueryhtmlrandomaudio-player

Domain Error Crossed

My issue is that I am working with cross-domains and making an ajax request to the same domain, let's say Domain A. However, I keep encountering an error saying 'No Access-Control-Allow-Origin'. $.ajax({ type: 'get', url: ...

jqueryajaxweb-servicescross-domain

Leveraging JavaScript to trigger onClick() functions for multiple buttons throughout a webpage

        While searching for solutions, I came across several articles with similar topics, but unfortunately, none of the proposed solutions worked. Please forgive me if it was due to my own error. Background I am assisting a client who is transition ...

javascripthtmleventsdownloaditeration