Stripping out only the position attribute using jQuery

I have implemented a code with the following characteristics:

  1. The navigation items' texts are hidden behind certain Divs, which I refer to as Navigation Divs.

  2. When the mouse hovers over these pixels (navigation Divs), the text that is behind them slides right and left, and in some cases moves up or down about 15px using the animate() method...

  3. When the mouse moves to another Div, the other text should reset to its original position for the next action. I achieved this by using:

    $(document).on('mouseover', '.pixel#p18', function(){
   $('.submenus').not("this Div's TEXT").fadeOut('fast').removeAttr('style');
});/* This Div's Text is just an example*/

I have applied this kind of setup for all of my navigation texts..

However, I am facing a problem:

  1. When I hover the mouse on one of the navigation Divs, some of the texts that were not animated become visible due to removeAttr('style')!!! And I don't want that to happen...

  2. Is there any alternative way to slide the texts or other elements to the left, right, top, and bottom with customizable values of movement...??? For example, sliding 23px to the left or 17px to the top... etc.? I am familiar with slideUp and slideDown but I'm not sure if they are suitable for my code...

  3. Do you have any better ideas for this---you probably do because I think what I have currently is very poor

  4. Lastly, why are my codes running so slow? The animations I have implemented sometimes lag, and I'm unsure whether it's due to my selectors or other factors.

javascriptjquerycss

Answer №1

In order to achieve this effect, you can utilize the .animate function along with a callback. Try using the following code snippet:

$('.submenus').not("this Div's TEXT").animate({opacity:0},500,'linear', function() {
    $(this).removeAttr('style');
});

Upon completion of the animation, the attribute will be removed accordingly.

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

Using Vue.js to process JSON data

My issue lies within this JSON data. I am trying to consume only the first element of the array using Vue.js 2 in order to display it. I was able to achieve this successfully using the console, but not with Vue.js. This line of code in the console works: ...

javascriptjsonvue.jsvuejs2

Exploring the power of promises in the JavaScript event loop

Just when I thought I had a solid understanding of how the event loop operates in JavaScript, I encountered a perplexing issue. If this is not new to you, I would greatly appreciate an explanation. Here's an example of the code that has left me scratc ...

javascriptnode.jses6-promiseevent-loop

Utilize fetch API in React to streamline API responses by filtering out specific fields

I have received an API response with various fields, but I only need to extract the description and placeLocation. results: [{placeId: "BHLLC", placeLocation: "BUFR", locationType: "BUFR",…},…] 0: {placeId: "BHLL ...

javascriptreactjsjson

JavaScript error message stating that the setAttribute function is null

As a newcomer to JS, I am currently working on creating a task list webpage that allows users to submit projects and create task lists within each project with designated due dates. In order to generate unique ID tags for projects and tasks, I utilized UU ...

javascripthtmlnpmwebpack

Convert an array of string values into a JSON format

I need help with converting an array stored in my database to a more user-friendly format. Currently, it is saved as follows: ["size:medium","height:10cm"] This format makes it difficult to display in a table. I am wondering if there is a way to conver ...

javascriptphpjson

toggle switch for numerical input

Whenever the "Qty" radio button is selected, I need to activate an input box that accepts numbers. Conversely, when the "rate" radio button is clicked, I want to disable this input box. This is how I designed it: <input type="radio" class="radioBtn" ...

javascriptjqueryhtml

Unable to retrieve the chosen option from the datalist

I am encountering an issue with a datalist where I can't seem to retrieve the value that is currently selected when a button is clicked. Despite following recommendations from various posts on Stack Overflow, my code still returns undefined. Interesti ...

javascriptjqueryhtmlreactjs

Assign a CSS class to a DIV depending on the vertical position of the cursor

The website I am currently developing is located at Within the site, there is a collection of project titles. When hovering over a project title, the featured image is displayed directly below it. I would like to change the positioning of these images to ...

javascriptjquerycss

Disable Button's Shadow when it is in an active state (clicked)

Check out the DEMO to see the button animation CSS in action. The CSS code for the button animations is as follows: .btnliner { /* CSS properties */ } /* More CSS properties */ .btnliner:hover { /* Hover effects */ } Here is the corresponding J ...

javascriptjqueryhtmlcss

Creating fixed-size arrays within a Mongoose schema is a commonly sought after feature that allows

For a specific scenario where I have example input: [[1,2],[3,2],[1,3],...,[4,5]] I am wondering about the correct way to define a model schema in mongoose. Here is my initial Schema: const SubproductSchema = new Schema({ ... positions: [{ type: ...

javascriptnode.jsmongoosemongoose-schema

Trouble with Google Web Fonts appearing incorrectly on Chrome for Windows 7

Currently facing an issue with a website I am developing using Wordpress: In Chrome, running on Windows 7, the body text on the homepage is supposed to be displayed as a Google Font. However, for some reason, the last line of the text is appearing in the d ...

csswordpressgoogle-chromewindows-7google-font-api

Is there a way to apply a css class to all nested elements in Angular 6 using Ngx Bootstrap?

I've defined a CSS class as follows: .panel-mobile-navs > ul > li { width:100% } Within the HTML, I am utilizing Ngx-bootstrap for a series of tabs like this: <tabset class="panel-mobile-navs" > ... </tabset> My intention is to ...

htmlcssangularangular6ngx-bootstrap

Why isn't the correct component being shown by react-router?

I have encountered an issue with my code. When I type localhost:8080 in the browser, it displays the App.js component as expected. However, upon navigating to localhost:8080/#/hello, it still shows the App.js component instead of hello.js. Interestingly, ...

javascriptreactjsreact-router

`CSS Animation fails to run in Internet Explorer and Microsoft Edge browsers`

My issue with the CSS animation is that while the opacity animates properly, the translate effect does not seem to work as expected. You can see the problem here: https://jsfiddle.net/bLxb8k3s/ It appears that the reason for this issue is because IE and ...

cssinternet-explorercss-animationsmicrosoft-edge

Utilizing Dropzone for file uploads in Node.js, Express, and Angular

I'm running into a bit of trouble trying to get the file recognized on the server side with node.js. Especially when trying to access request data, such as req.files or req.body If anyone has any advice, here are some code snippets: HTML: <form ...

javascriptangularjsnode.jsexpress

What is the proper way to generate an iframe with a width set to "100%" or left empty, rather than width = "100"?

I am currently utilizing vimeowrap to iterate through a playlist of videos. I would like the iframe that is generated by vimeowrap to have either a width and height set to "100%" or nothing at all. For more information on Vimeo Wrap, visit: To see my tes ...

javascripthtmljsonvimeo

Reasons why the Express Route fails to store cache while executed in a separate file

My code works fine when it's all in one file, but the caching stops working when I move it to a separate middleware file. Can someone help me understand why the caching isn't functioning properly in my middleware? Here is the working code: var e ...

javascriptnode.jsexpressredis

Utilize JavaScript to trigger a function depending on the selected options from dropdown menus

I've been working on a fun little project for a web page where users can select two items from a drop-down menu and then click a button to play a sound corresponding to their selections. However, I'm facing some challenges with getting my JavaScr ...

javascripthtmldrop-down-menu

What is the best way to align a div with a fixed width in the center, when it is positioned between two other divs within a parent

I have this HTML (technically JSX) code snippet here: The center div with the class domain-input-parent is supposed to have a fixed width of 400px and stay centered horizontally on the screen. This arrangement ensures that both the domain-label and icon- ...

htmlcssreactjsresponsive-design

Should a React application perform a complete refresh when a file is reloaded?

Recently, I delved into the world of React and learned about one of its key benefits: updating only the necessary DOM elements. However, as I began building an app from scratch, I encountered a situation where every time I saved the .js file, it resulted ...

javascriptreactjs