Preserving content following the use of jQuery's fadeIn/fadeOut methods

I have a jQuery function that fades in and out a sprite (sprite without text) from one background to another, and it's working as intended. However, this function is also fading out the text within an element. HTML:

<div id="menu">
    <ul class="main_menu current-s1">
     <li class="s1"><a class="hov" id="main" href="/portfolio" title="main">MAIN<span></span></a></li>
     <li class="s2"><a class="hov" id="me" href="/portfolio" title="me">ME<span></span></a></li>
    </ul>        
</div>

Jquery:

$(function() {
  $(".hov").find("span").hide().end().hover(function() {
    $(this).find("span").stop(true, true).fadeIn();
  }, function() {
    $(this).find("span").stop(true, true).fadeOut();
  });
});

Is it possible to keep that text? I know I could use a sprite with added text, but I also have an animation written for that text so I'd like to keep it.

Here is my Fiddle: http://jsfiddle.net/vrt15/jzn7gb97/

Regards

jquerycssfadeinfadeout

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

Ensuring React's setupProxy functions properly in conjunction with express.js

I've encountered an issue while trying to pass images from express to react. My express.static is correctly set up, so when I visit localhost:5000/public/images/me.jpeg, the image loads in my browser. However, when I attempt to use <img src="/publi ...

javascripthtmlcssreactjsexpress

What is the best way to align an InputAdornment IconButton with an OutlinedInput in Material-UI?

Struggling to replicate a text input from a mockup using Material-UI components. Initially tried rendering a button next to the input, but it didn't match. Moving on to InputAdornments, getting closer but can't get the button flush with the input ...

javascriptcssreactjsuser-interfacematerial-ui

Constantly positioning the text cursor over the Textbox

I am currently in the process of developing a webpage that will feature only one text box for displaying information based on the input data provided. Our strategy involves utilizing either a Barcode Scanner or Magnetic Swipe as well as a Touch Screen Moni ...

javascriptjqueryuser-interfacefocus

Accessing a React component by ref before it has been rendered for the first time

In my component, I have a set of links with an animated line underneath the active link using position: absolute. Before I can position the underline correctly, I need to determine the offset().left value of the active link. The challenge is that before ...

jqueryreactjs

Tips for integrating Jquery into your Laravel project

There is an issue that I am facing on this particular line of code <script type="text/javascript" src="js/jquery.js"></script> I suspect the error is due to jQuery not being installed in my Laravel project. I typically use npm for installin ...

jquerylaravelnpm

What is the best way to link various stylesheets to a Rails project?

In my project, I have a main stylesheet called application.css included in the layout file layouts/application.html.erb: <%= stylesheet_link_tag "application" %> However, there is a specific section of the website where I want to use a different st ...

ruby-on-railscss

How to prevent jQuery from continually recalculating width on window resize?

Here is the code I've been working on: http://jsfiddle.net/7cXZj/ var callback = function () { $('.progress-bar').width($('.progress-bar').parent().width() - 190); $(".mainpart-background").animate({ width: "80%" }, 80 ...

javascriptjquerycssjquery-animate

Implementing real-time flash notifications after a successful AJAX update in Ruby on Rails

When it comes to displaying a flash success notification after a successful AJAX update, I typically use the following method in my action: def something redirect_to "that_controller_path", :notice => "Success" end However, I am ...

jqueryruby-on-railsajax

Arrangement of Bootstrap card components

Each card contains dynamic content fetched from the backend. <div *ngFor="let cardData of dataArray"> <div class="card-header"> <div [innerHtml]="cardData.headerContent"></div> </div> <d ...

javascripthtmlcssangulartwitter-bootstrap

"Seeking a more flexible JSON parser that allows for greater

I am in need of passing various strings that are formatted as json to a json parser. The issue is that jQuery.parseJSON() and JSON.parse() strictly support only a specific json format: If a malformed JSON string is passed, an exception may be thrown. For ...

javascriptjqueryjsonknockout.js

Making the Select Tag function as an on-click event in JQuery

So I currently have a tab set up that functions as on click links when viewed on desktop. However, for tablet and mobile devices, I need it to be transformed into a select drop down list while maintaining the same functionality. Below is the code used for ...

javascriptjqueryhtmlevents

Changing the string "2012-04-10T15:57:51.013" into a Date object using JavaScript

Is there a way to transform the format "2012-04-10T15:57:51.013" into a Date javascript object using either Jquery or plain Javascript? ...

javascriptjquerydate

Having trouble sending the Authorization Token in a POST Ajax request - encountering an issue where the request header field authToken is being blocked by Access-Control-Allow-Headers

After obtaining the authToken by logging in, I attempted to run this code on a web browser to access the Taleo API. However, I encountered an error stating: "Request header field authToken is not allowed by Access-Control-Allow-Headers." Can anyone advis ...

jqueryajaxrequest-headers

Is there a way to send me the result of the radio input (Yes/No) via email?

Is it feasible to send the results of a radio input (Yes/No) back to my email directly using HTML, CSS, and Javascript? ...

javascripthtmlcssmailto

ways to conceal icon image when the textbox is devoid of content

Is there a way to hide the clear icon from a text box if the length inside the text box is less than 1? I attempted the following code, but it didn't work for me. The inner icon is not hidden when the input field length is less than 1. For a demo ex ...

javascriptjquery

Vanilla JavaScript: toggling text visibility with pure JS

Recently, I started learning javascript and I am attempting to use vanilla javascript to show and hide text on click. However, I can't seem to figure out what is going wrong. Here is the code snippet I have: Below is the HTML code snippet: <p cla ...

javascripthtmlcss

How can I ensure that Div and its contents are only responsive to changes in width?

Initially, I'm feeling a bit confused but I'll try my best to articulate my issue and what I need. Within a div element, there's another div that I want to move left and right only, following the same path as an image when resizing (refer t ...

htmlcss

Align component within material-ui grid

Looking to center align the same cards but not just the grid component, I need the content itself to be equally distant from the borders and each other. I've searched and tried different solutions without luck. https://i.stack.imgur.com/aZj7H.png htt ...

javascriptcssreactjsmaterial-ui

Preserving the video's aspect ratio by limiting the width and height to a maximum of 100%

I am trying to integrate a YouTube video using their embed code in a "pop-up". However, I am facing an issue where the video does not resize to fit within the height of its parent. I want it to be constrained by the div#pop-up that contains the video. Curr ...

javascripthtmlcssvideo

How can I properly parse a JSON file in Node.js?

Utilizing node.js, I have created a webpage (index.html) for visualizing a network graph using the vis.js library. To draw a network graph with this library, it is necessary to provide json arrays for both nodes and edges (see example). // array of nodes ...

javascriptjqueryjsonnode.jsvis.js