I am attempting to achieve a smooth transition effect by fading in and out the CSS background color using JQuery and AJAX

Can anyone help me with my issue related to using Ajax to fadeIn a background color in beforeSend and fadeOut in success? I seem to have made some mistakes but can't figure out what went wrong.


            var data={
                action: 'tag_user_update',
                postSearchNonce : MyAjaxSearch.postSearchNonce,
                tag : $(this).closest("a").text(),
                users_id : $("#users_id").val()
            }

            $.ajax({
                url: MyAjaxSearch.ajaxurl,
                type:'POST',
                cache: false,
                data:data,
                beforeSend: function() {
                    $('.tag_link').animate({ backgroundColor:'yellow'},'slow');
                },
                success: function(data){
                    $('.tag_link').animate({ backgroundColor:'white'},'slow');
                }
            });//ajax
javascriptjquerycssajax

Answer №1

Ensure that when using ajax methods, you structure them like this: $.ajax({}).done({}) or $.ajax({}).success({}). It seems you've mistakenly placed the callback function .success() inside the .ajax({}) request.

In the example provided below, notice how .done() is outside of the .ajax() call. Similarly, .success() should not be internal either. These are both callback functions that execute after your ajax() request. Furthermore, since .success() is being deprecated, using .done() has the same effect as shown in the following example.

retrieved from http://api.jquery.com/jquery.ajax/

$.ajax({
    url: "http://fiddle.jshell.net/favicon.png",
    beforeSend: function( xhr ) {
    xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
    }
})
.done(function( data ) {
   if ( console && console.log ) {
   console.log( "Sample of data:", data.slice( 0, 100 ) );
   }
});

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

Dealing with numerous condition matches in Node.js: Tips and Tricks

Currently, I am developing an API in Express.js where I have to check for certain conditions before sending a response. The issue I'm facing is that if two conditions are met, my code ends up responding twice. Is there a way to prevent the other condi ...

javascriptmysqlnode.jsrestexpress

Adjust the positioning of two divs on mobile devices

My website has two main divs, one on the left and one on the right. The left div is styled with the classes: col-md-3 left_side And the right div with: col-md-9 right_side In the CSS file, the left_side and right_side classes only have padding, without a ...

htmlcsstwitter-bootstrapcss-floatbootstrap-4

Distinctive design for three different list items

Currently working on a project that involves the use of ul and li elements. I need to change the background for every 3rd li element in alternating patterns. Since the li elements are generated from the backend, I do not know how many there will be. I at ...

jqueryhtmlcss

Unlocking the Interactive Potential of CSS Across All Screen Formats

I am currently working on transforming my website into an engaging and interactive platform. My first challenge: The alignment of the logo image does not meet my desired specifications. Whenever the screen width exceeds 1200 pixels, there seems to be exc ...

phphtmlcssinteractive

Tips for Extracting Real-Time Ice Status Information from an ArcGIS Online Mapping Tool

My goal is to extract ice condition data from a municipal website that employs an ArcGIS Online map for visualization. I want to automate this process for my personal use. While I have experience scraping static sites with Cheerio and Axios, tackling a sit ...

javascriptnode.jsweb-scrapingarcgis

Unable to place value into an array following the invocation of a function in Angular 9

Within an array I established, I am encountering an undefined value when I use console.log. Take a look at my component.ts below: export class OrderExceptionReportComponent implements OnInit { public sessionData: ExceptionReportSessionData[] = []; n ...

javascriptarraysangulartypescript

Nuxt Js - Ensuring script is only loaded once during the initial page load

I already have a static website design, but now I'm converting it to Nuxt.js to make it more interactive. After running my Nuxt server with "npm run build...npm run start," the scripts load and my carousel/slides work fine. However, when I navigate to ...

javascriptvue.jsnuxtjs

The dropdown menu component in ReactJS is malfunctioning

I'm currently working on a form that includes a select box which fetches data from the server and posts it back to the same server. I have implemented the select box component from ant design. Unfortunately, I've encountered an issue with the ha ...

javascriptajaxreactjs

The iOS simulator running a Capacitor-converted web app is experiencing inconsistent data retrieval issues from the local development server

I have recently transitioned my web app, built in node.js, to also have a mobile app version using capacitorjs. In the web app, I utilized handlebars to parameterize views and served them using res.render(). However, with capacitorjs, it seems the approach ...

iosnode.jsajaxcapacitorinfo.plist

The styled-components in CSS are causing some issues with the color themes

Link to Image Showing the Issue. I have implemented themes and colors in my React application successfully, but I am encountering a peculiar problem with the labels. Whenever I switch the theme from green to blue and then back to green, focusing on the inp ...

cssreactjsformsinputstyled-components

Is there a way to rotate the custom marker icon in vue2-google-map?

After reading the documentation, I discovered that using path is the only way to rotate the marker. In an attempt to customize my marker, I created my own PNG image. However, I have been unsuccessful in overriding the CSS of the marker. I even tried to ov ...

javascriptvue.jsgoogle-maps

Is it possible for the JavaScript DOM API to retrieve the exact casing of attribute and tag names?

Is it possible to retrieve the original casing of an attribute name or tag name from the source? The attribute name is in lowercase The tag name is in uppercase The local element name is in lowercase I am looking for a solution that doesn't require ...

javascripthtmldom

Creating Interactive Graphs with HTML and JavaScript: A Guide to Dynamic Graph Drawing

I am seeking to create a dynamic graph using standard HTML, JavaScript, and jQuery (excluding HTML5). The nodes will be represented by divs with specific contents, connected by lines such as horizontal and vertical. The ability to add and remove nodes dyn ...

javascriptjqueryhtmlgraph

JavaScript allows you to set an expiration date for a specific item

I am facing an issue with a form that contains inputs. On clicking the submit button, I want to capture the current time and add 10 hours to it before updating the table cell named expdate. Although I have a function in place for this purpose, it seems to ...

javascriptphpjquerymysql

Navigating collisions in the ECS architecture: Best practices

I'm currently developing a game using typescript and the ECS design pattern. One of the challenges I'm facing is handling collisions between different entities within the game world. I have an entity called Player which comprises several componen ...

javascripttypescriptgame-engineentity-component-system

Is the second parameter of the function being used as a condition?

Why is it necessary to validate the helpText argument within the function to be non-equative to null when its ID is linked with the span tag? The functions task is to set and clear help messages in the form field using built-in CSS classes. <input id ...

javascripthtmlcssformsif-statement

To encounter an "undefined" response in the following route of an express application, utilize the next('route') function

const express = require('express') const app = express() app.get('/user/:uid', (req, res, next) => { if (req.params.uid === 'lai9fox') next('route') else next() }, (req, res, next) => { res.send(`<h1& ...

javascriptnode.jsexpress

Recursion using Node.js Promises

I'm facing some difficulties while iterating through my Promises and completing my parser code: let startFrom = 0, totalRecords = 10000, doneRecords = 0 const rows = 10 const parserRequests = function () { if (startFrom <= totalRecords) { ...

javascriptnode.jsrecursionpromise

An issue observed in MVC 5 with Json requests is the absence of the final dropdown option in a cascading dropdown menu

While choosing items from my cascading dropdown menus, I notice that the last item in the list is missing until I make a selection. Once an option is chosen, the final item appears at the end of the list and becomes visible and selectable. ViewModel pub ...

c#jqueryjsonasp.net-mvccascadingdropdown

jQuery's element loading function fails to work with ajax requests

When trying to preload ajax data before attaching it to a div, I utilized the following code: $.ajax({ url: 'ajax.php', data: { modelID:id }, type: 'post', success: function(result){ $(result).load(function(){ ...

javascriptjqueryajax