Animation does not trigger before switching pages

I'm attempting to create an animation that occurs before the page transitions. After finding a jQuery script on this site and tweaking it to match my HTML, I realized the code works in a fiddle but not on my actual page. Any assistance would be greatly appreciated!

Currently, the page changes without executing any of the script.

UPDATE: I've noticed that when I change #link in the jQuery to "html," it functions properly. However, no other elements seem to work. Strange.

jQuery:

$("#link").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).animate({
        opacity: 0.25,
    }, 5000, function() {
        document.location.href = this.href;
    });
});

HTML:

<a id="link" href="/page/"></a>
jqueryhtmlcssweb

Answer №1

Give this a shot:

$("#link").click(function(e) {
    $(this).animate({
      opacity: 0.25,
    }, 5000, function() {
      document.location.href = this.href;
    });
    return false;
});

Answer №2

Consider utilizing the following code snippet as an alternative to 

document.location.href = this.href;
:

window.location = this.href;

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

Guide on customizing a dropdown button in a class-based Angular library with version 4 or higher

My dilemma revolves around utilizing the Angular Material library for a drop-down navigation bar. The issue at hand is my desire to hover through the list, yet I am unable to tweak the style within HTML. Fortunately, I can easily make alterations in Chrome ...

htmlcssangularangular-material

Iterate through the JSON response and send it back to Jquery

I'm almost done with my first jQuery autocomplete script and just need some assistance in understanding how to make the found elements clickable as links. Here is a snippet of my JavaScript code: $(document).ready(function() { var attr = $(&apos ...

javascriptjqueryjsonautocomplete

jQuery and Ajax are facing a challenge in replacing HTML

Imagine a scenario where there is a button on a website that, when clicked, replaces a paragraph (<p>) with a header (<h1>). Unfortunately, the code to make this functionality work seems to be faulty: index.html <head> <script s ...

javascriptjqueryajax

Learn the process of applying distinct CSS classes to various elements within an AJAX response

The client initiates an AJAX call via jQuery. Upon fetching data from the database, I return the response which includes the application of numerous classes and styles to various HTML tags. Unfortunately, this process results in code that appears unsightly ...

javascriptjqueryhtmlcssajax

turn on labels for every individual cell in the bar graph

I'm working on setting labels of A, B, and C for each bar chart cell to display all my data on the chart. I attempted using data.addColumn('string', 'Alphabets'); but it's not functioning as expected. It seems like a simple ta ...

javascriptjquerygoogle-visualization

The jQuery append function does not incorporate CSS styling

I am currently facing an issue where my jQuery code successfully appends a piece of HTML, but the CSS styles are not being applied to it after the append operation. What is the correct approach to resolve this? This is the method I am using: if(listone[ ...

jquerycss

What is the best way to adjust the height of a div based on its child content

I've been experimenting with various methods to extend the white background around the title to cover the rest of the content. I've tried using overflow, clear, min-height, max-height, and even the '*' selector but nothing seems to work ...

htmlcss

Access the hyperlink contained within the table

Having trouble clicking a navigation link inside a table? I've tried: getElementByID getElementsByClassName getElementsByTagName but none seem to be working. When using the following code: Set tbls = HTMLDoc.getElementByID("tabToggleTable") it r ...

htmlvbscriptgetelementbyid

:active state not functioning correctly

I've utilized the :after and :before pseudo-elements to create a border effect when hovering over the navigation links. I've been trying to achieve the same border effect in the :active pseudo-class as well. Can someone please guide me on how to ...

htmlcss

After the initial submission, the Bootstrap placeholder for the Select Option is only displayed

I'm attempting to create a placeholder for my dropdown with multiple options using Angular and Bootstrap. However, it seems like I may be doing something incorrectly. I created an option for a placeholder such as please select and placed it at the top ...

htmlangulartwitter-bootstrap

Gain access to the iterable within the adjacent tag

I am looking to access an iterable from a sibling tag, but unfortunately it is within a table which complicates things. Simply wrapping the content in a div and moving the iteration outside is not possible due to the structure of table rows. Here is an exa ...

htmlvue.js

Having trouble getting event modifiers to work in Vue when added programmatically

Trying to dynamically add events using v-on through passing an object with event names as keys and handlers as values. It appears that this method does not support or recognize event modifiers such as: v-on=“{‘keydown.enter.prevent’: handler}” T ...

javascripthtmlvue.jseventsevent-handling

Transitioning jQuery .load and the usage of sorttable.js for sorting data

My jQuery code snippet is as follows: $("#loadBtn").click(function(){ $('#div1').delay(200).slideUp('slow') .load ('page2.php #div2').hide().delay(300).slideDown('slow'); return false; ...

javascriptjqueryhtmlajaxsorttable.js

Maintain user input within the table following a page refresh

I have been working on developing a table that allows users to edit it. I successfully created a script that adds comments to the table, but unfortunately, these comments disappear when the page is refreshed. I understand that I may need some additional to ...

javascripthtmljsonhtml-tablelocal-storage

Can Webpack effectively reduce the size of jQuery files?

While this question may seem basic, I have yet to come across a direct answer to it. My dilemma is whether or not to continue utilizing jQuery in my React application, primarily for AJAX purposes. Will webpack intelligently include only the necessary AJA ...

jqueryreactjswebpack

Creating a dynamic category menu using angularJS

I'm struggling with the logic behind creating a category menu using AngularJS I need to display all categories with a parent category id of 0. Once that is done, I want to display all subcategories that belong to each parent category. The final categ ...

htmlangularjsangularjs-ng-repeatangular-ng-if

I need assistance in configuring headers for an Ajax request using Oauth 1.0. Can anyone verify if my authorization header setup is correct?

After spending countless hours trying to solve this issue, I am struggling to make it work. I'm unsure if the information I am putting in the authorization header of my Ajax request is correct, especially since there is little informati ...

jqueryajaxoauthnetsuite

Filter JSON data deeply for specific values

I am attempting to filter JSON data based on user checkbox selections in JavaScript. The challenge I'm facing is implementing multi-level filtering. The data has two dimensions that need to be filtered: first by OS selection and then by a selected que ...

javascriptjqueryangularjs

What is the best way to incorporate progressive JPEG images onto a website?

I am currently working on a website called winni.in that is built using Java, Html, and Javascript. I would like to incorporate progressive image rendering upon page load, but I lack the necessary knowledge. I have come across and explored the following re ...

javascriptjqueryhtmlcssjpeg

Strange height problem detected in embedded YouTube video

Currently, I have a page with an embedded YouTube video that is intended to be placed in a container with a variable width. When the video is outside of the container, the aspect ratio appears normal. However, once it is placed inside the container, the he ...

htmlcssvideoyoutube