Flipping the Script on CSS Animations

Hey there, it's been about four hours and I'm hitting a wall. On my website (), the left-hand menu fades out as you scroll down, just as I intended. Now, I need some help getting the menu to fade back in when the user either reaches the bottom of the page or clicks on the "Return to top" button near the bottom right corner. Here's the JavaScript that's powering most of the functionality on this page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.jakerevans.com/wp-content/themes/enfold-child/assets/css/timelinecss.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var scrollPercent;
$(document).ready(function() {

/* Every time the window is scrolled ... */
$(window.parent).scroll( function(){
  // The rest of the JavaScript code goes here...
});


});
</script>
</head>

<body>
<!-- HTML content for the timeline elements -->
<!-- Feel free to share your ideas! Thanks in advance! -->

Do you have any thoughts or solutions? Any help is appreciated. Thank you so much!

Answer №1

To conceal an element, it's best to create a CSS class called "hidden" with the property of "opacity: 0". Depending on the scroll position, you can dynamically add or remove this class to control the visibility of the element. Additionally, apply a transition effect like "transition: .2s" to smoothly show or hide the element (not the hidden class itself). This will result in a fading animation whenever the hidden class is toggled.

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 jQuery window.location.replace function seems to be stuck in a never

Utilizing window.location.replace() with jQuery to redirect to a new page on WordPress if an older browser is detected in either Internet Explorer or Firefox due to the HTML5 layout. var browser = jQuery.browser; var version = browser.version.slice(0.3); ...

Utilize jQuery to retrieve content from the URL http://imgur.com/gallery/hot/page/1.json

Hello, I'm attempting to retrieve this JSON data using $.getJSON and $.ajax(), but I'm not having any success. jQuery.ajax({ url: "http://imgur.com/gallery/hot/page/1.json", type: 'GET', ...

Adding External HTML Content to a JQuery Mobile Website

As I work on dynamically integrating an external HTML source into a jQuery mobile page, I encounter the issue of it not appearing as expected - lacking the jQuery mobile styling. Can anyone offer some guidance on what might be going wrong? Main HTML: < ...

Executing an AJAX request using a combination of jQuery and Javascript to access a webpage located on an external domain

The question at hand is quite straightforward, but finding the answer might not be as easy. It's all part of the fun! ...

The Python socket fails to receive a valid response after sending an HTTP 1.1 CONNECT request

I am attempting to create a simple program that establishes an https tunnel with www.google.com on port 443. Initially, I used the code below: import socket def main(): s = socket.socket(socket.AF_INET, socket.SOCK_STREAM) s.connect(("www.google. ...

Tips for placing the header text at the center of a TemplateField in your design

I'm using a GridView with TemplateFields. I attempted to align the header text of the TemplateField to center by using HeaderStyle-HorizontalAlign="Center", but it doesn't seem to be working as expected. <asp:TemplateField HeaderTex ...

Issue with displaying sidebar using blockquote in Bootstrap 4.1.3

After implementing the blockquote class in Bootstrap 4.1.3, all the effects were successfully applied, except for the sidebar. Here's a comparison of how it appears in tutorials: https://i.sstatic.net/qNXrV.png And here is how it appears in my Chrom ...

Downloading Files with Jquery and PHP – The Powerful Combination

I am looking to implement a feature that allows users to download files using AJAX functionality. When the user clicks on the download link, an AJAX request will be made with $_GET variables to a PHP file that will process the data and retrieve the relevan ...

What is the best way to retrieve the length of a string from an element once it has been bound with Angular

I am currently working on a task that involves counting the number of characters within an element. However, the element contains bindings (e.g. {{data.username}}) and I need to determine the string length after the binding has been resolved. My initial a ...

How to dynamically change the background color of a table based on row values in PHP

I'm working on a PHP table where I want each line to change color based on the value in the first column. For example, if the first column has a value of 1, the line should be red; if it's 2, then blue; and so on. <table> <tr> &l ...

The issue with ajax in CodeIgniter is that it keeps displaying a false message, even though the value is present

Trying to validate the existence of a value in the CodeIgniter website's database using AJAX. Below is the code snippet: <input id="username" name="pincode" type="text" class="form-control" placeholder="Enter Pincode"> <input id="prodid" n ...

delete the initial background color assigned to the button

The "ADD TO CART" and "save design" buttons are currently displaying as shown in the image below. I would like to make the "SAVE DESIGN" button look similar to the "ADD TO CART" button, meaning I want to remove the background-color and dot symbol. Code ...

Divs are piling up on one another, but they're not in the correct sequence

Currently, I have two divs placed side by side and utilizing a media query to stack them. However, my goal is to have the yellow div on top with the blue div below it once the script is executed. Unfortunately, I am unsure of how to achieve this. #wra ...

Route Angular 4 application static resources to a /PORT directory rather than the primary domain

Our Angular 4 application is integrated within a Node + Express app and started like a typical node app, such as: node index.js On a local machine, the Angular app is served from the /client directory: app.use(express.static(__dirname + "/client")); Onc ...

What is the best way to activate an @keyframe animation based on the scrolling action?

I am currently working on an @keyframe animation that rotates a circle along its x-axis, starting from 0 degrees to 90 degrees and then back to 0 degrees. My objective is to synchronize the rotation of the circle with the user's scrolling movement on ...

Debugging a node.js application remotely using SAP Cloud Foundry

Having successfully deployed multiple node.js express services on SAP Cloud Foundry, we have encountered a roadblock in the form of remote debugging. Recognizing that others may be facing similar challenges, we are putting forth a direct inquiry: What is ...

Typescript HashMap implementation with Lists as values

Currently delving into TypeScript, I am attempting to generate a collection in a manner akin to the following Java example: HashMap<String, List<String>> hashMap = new HashMap<String,List<String>>(); Struggling to locate any releva ...

Angular 2: Emptying input field value on click event

I am experiencing an issue with resetting my input values. I have a search bar with filter functions. When I enter a value, it displays a list below and I want to add a function to these links. When I click on one of them, it takes me to another component ...

Hover effect transition malfunctioning

I've been attempting to incorporate a hover image effect on my website. I included the script in the link below. However, I'm struggling to achieve a smooth fade transition and a 2-second delay on the hover image. Can someone please assist me wit ...

Wrap the content with a div at the beginning and at the end

Hello, I am currently working on implementing the following structure: <div class="content"> <img src="/"> <img src="/"> <div class="slideshow"> <img src="/"><img src="/"><img src="/"></div> ...