Trouble with jQuery delay in updating the CSS attribute while using fadeIn

After writing a simple JQuery code, I noticed that every time I click on 'eat', the animation lags. Is there any way to preload this animation for smoother performance?

The #custom_menu element is a full-page section with a fixed position (similar to a popup window).

$('.eat').click(function(){
    $('#menu').css('opacity', '0');
    $('#custom_menu').css("display", "block").hide().fadeIn(500);
    $('#custom_menu').css("overflow-y", "scroll");
    $('body').css("overflow-y", 'hidden');
});

Answer №1

What is the reason for using jquery to set css properties? It might be more efficient to create a custom css class, place all styles there, and then use jquery to add or remove that class.

In addition, as suggested by Steven, consider raising the fadeIn duration.

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

Templating with Underscores: Revolutionizing token markers

When using out of the box underscore templating, the default markers for raw content are <%= %>, and for HTML escaped content are <%- %>. However, it is possible to change these markers by adjusting the template settings, for example: _.templ ...

How can Swipe support help you slide a menu back in?

For implementing swipe support on my landing page carousel, I included jquery.mobile.custom.min.js. However, I am facing a challenge with adding swipe support to "close" the menu. Essentially, swiping left should have the same effect as clicking the butto ...

React Hooks findByID method is throwing an error stating that it cannot read the property 'params' because it is undefined

As I dive into learning React hooks, I'm realizing that it's crucial to stay up-to-date with the latest trends in web development. Despite hours of research and tinkering around, I can't seem to wrap my head around some key concepts. The fac ...

Preview of Hoverbox Caption

I'm working on a website using the Hoverbox image gallery (http://host.sonspring.com/hoverbox/) and I'm trying to include captions for each image preview that appears when hovering over the enlarged image. However, I am facing difficulty as I hav ...

The number of articles in the MongoDB database is currently unknown

Currently, I am in the process of developing a blog using nodejs, express, and mongodb with jade as the template engine. The folder structure of my project looks like this: project/ modules/ views/ index.jade app. ...

Are you interested in learning HTML/CSS and joining a class?

When working with HTML, you can use the TOP tag to quickly navigate to the top of a page. This got me thinking - is it possible to create a link on my webpage that will take users directly to a specific class using only HTML and CSS? I'm curious to kn ...

Data is persisted in the database even when an error occurs

When a user submits their Permanent Account Number (PAN), I check if it already exists in the database. If it does, I receive an error message stating that the PAN number is already registered. However, if I ignore the error and proceed without changing th ...

Transforming retrieved data into an array using Node.js

Got some data from a URL that looks like this: data=%5B1%2C2%2C3%2C4%2C0%5D which when decoded is [1,2,3,4,0]. Used the snippet below to parse the data: var queryObj = querystring.parse( theUrl.query ); Seems like it's not an array. How can I con ...

Looking to incorporate HTML5 videos into a responsive Bootstrap carousel?

I've been working on creating a carousel that includes videos. When it comes to images, everything works smoothly as they are responsive even in mobile view. However, I'm encountering an issue with videos where the width is responsive but the hei ...

What is the process for loading an HTML form into a specific target using Angular?

Is there a way to load an HTML form into a target in Angular without the use of jQuery? I have a working script, but I am currently stuck on: <html> <head> <script src="components/angular/angular.js"></script> <script&g ...

Issue with min-height property in IE8 (and potentially other browser versions)

Trying to design a web page with 3 sections, each occupying 100% of the window height. Managed to make it work on Chrome, Firefox, and Safari, but facing compatibility issues with IE8 and possibly other versions. Test out the page here: Here's the H ...

Guide on establishing a connection with a TCP server and sending a JavaScript script to it

I am completely new to JS and node. I am using SkyX Pro, a telescope management software that has the capability to run a TCP Server on port 3040. By connecting with Netcat and providing it with Javascript starting with //* Javascript *//, I can control ca ...

Struggling with Incorporating Variables from Jquery?

I am facing an issue with my local website built using PHP. Within my project, I have a file named functions.php containing the following code: public function saveAll($idmt_salesarea, $thn_bln, $no_pesanan, $tgl_pesan, $idms_langganan, $idms_kodebarang, ...

Using AJAX to transform octet-stream into typed array (Float64Array)

I can't seem to figure out where I'm going wrong here. My attempt involves converting a binary stream obtained from an AJAX request into an array of doubles using JavaScript. Here is some of my code: The PHP script on my server returns an octet-s ...

Tips for adjusting a web address provided by a user

I have a JavaScript code that prompts the user to input a URL and then appends it to a div. The code is working fine, but now I am trying to add functionality to edit the entered URL by changing the width and height of any iframes before appending them. ...

toggle between utilizing the page object API and the primary Nightwatch API

Currently, I am incorporating the page object model alongside nightwatch for my testing procedures. Encountering challenges while trying to interact with an element led me to execute some jquery. However, the 'execute' command is not featured in ...

Are there any ways to pass an onClick function to a controller in React?

To prevent duplicate numbers from being generated, I added a button that, when clicked by a user, displays a message indicating that the value is being saved to avoid duplicates. However, when attempting to handle this on the server side controller, I enco ...

What is the best way to handle passing the "img" object to an onload event handler in ReactJS JSX?

I am currently working on an img element that I want to be able to listen for the onLoad event. However, I also need access to the image object itself in order to check properties like width and height. Since these images are generated dynamically, I won&a ...

Creating a custom math formula using a combination of Javascript and PHP

Is it possible to apply a math formula from another variable or database? var x = 7; var formula = '+'; var y = 10; By this, I mean that the variables should output = 17 (7 + 10); How can we implement this formula using Javascript or PHP? ...

There is no way to convert a strongly typed object into an observable object using MobX

I have been utilizing the MobX library in conjunction with ReactJS, and it has integrated quite smoothly. Currently, I am working with an observable array structured as follows: @observable items = []; When I add an object in the following manner, everyt ...