Having issues with jQuery's .hover and .mouseleave functions causing unintentional looping. Any suggestions on how to resolve this

What I want to achieve:

  1. When hovering over the image, it fades out.
  2. Text should fade in after the image fades out.
  3. Text should fade out when the mouse leaves.
  4. The original image should fade back in.
  5. End with the original image and no text displayed.

Issue:

I have the steps working, but they seem to be looping, causing the image and text to flash on and off. Any suggestions?

$("img").hover(function(){
    $(this).fadeOut();
$("p").text("CHAIR").fadeIn(); 
});

$("p").mouseleave(function(){
$("p").fadeOut();
$("img").fadeIn("slow");
});
p {
   display: none;
   position: absolute;  
   left: 100px;
   top: 150px;
   font-size:45px;   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="chair" src="http://edufurniture.com/images/catalog/category13.jpg" alt="">
<p></p>

Example of steps 1 - 4 on jsfiddle

javascriptjquerycsshtmlimage

Answer №1

Give this a try

  $(".foo").hover(
  function() {
    $('img',this).stop().fadeOut();
        $("p",this).text("TABLE").stop().fadeIn();
  }, function() {
    $('img',this).stop().fadeIn();
        $("p",this).text("TABLE").stop().fadeOut();
  }
);


.foo {
    width:250px;
    height:250px;
}
p {

   position: absolute;  
   left: 100px;
   top: 150px;
   font-size:45px;   
   }


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div class="foo"> <img id="table" src="http://edufurniture.com/images/catalog/category13.jpg" alt="">
    <p></p>
    </div>

http://jsfiddle.net/L1ye4y1j/9/

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

Preserve data on page even after refreshing in Angular

Upon opening my website, I expect to see "Finance/voucher" at the top. However, after refreshing the page, only "Finance" appears which is not what I want. I need it to always display "Finance/voucher" even after a page refresh. I have included all the r ...

javascriptangularcookiesangular-materialsolution

"Error encountered with window.open function not launching the desired link

I've been attempting to create a new window with a share link using the code snippet below: $content .= "<div class='container-after-post'> <div class='sharing'> <a href='$sswc_ ...

phphtml

Connecting Websockets in AngularJs for Message Binding

I've hit a roadblock with my mini project, and I have a hunch it's something simple... My challenge is binding websocket messages to an Angular datamodel, but I can't seem to make it work... Here is my controller and some HTML to display t ...

javascriptangularjswebsocketsockjs

Why does the map function in JavaScript not allow for a function argument?

I encountered an issue while calling a function and passing an array of objects as the first argument, with the second argument being an object property of the first argument. Strangely, the map function was not accepting the second argument property. He ...

javascriptnode.jsarraysexpressarray-map

Is there a method to change the name of a file and have it automatically updated in all other locations where it is referenced?

I need to change the name of an HTML file within Visual Studio Code, but this file is referenced in multiple other files. Is there a quick way to do this? Are there any shortcuts that will let me rename the file and automatically update all references in ...

htmlcssvisual-studiokeyboard-shortcutsshortcut

What is the process for applying a border to the chosen image within the ImageList of the MaterialUI component?

Currently, I have set up the images in a grid format using the and components from MaterialUI. However, I am looking to implement an additional feature where when a user clicks on a specific image from the grid, a border is displayed around that select ...

javascriptreactjsmaterial-ui

Tips for identifying the category of a hyperlink within my javascript code?

Hello, I am currently working on a script that involves AJAX functionality: function ajax(){ if (navigator.standalone) return; for (var i= document.links.length; i-->0;) { document.links[i].onclick= function() { var req= new ...

javascriptajaxclass

What is the best way to locate and list all video links, and include options for "Play Video" and "Download Video"?

I have a project where I am using PHP to crawl and generate video links from the web. Now, I am looking to implement an option for users to either "Play Video" or "Download Video" when a video link is detected, along with adding a video player if the user ...

javascriptphphtmlvideovideo-streaming

What is causing my Javascript media query for the sidebar to not function properly?

I am working on implementing a sidebar that slides out 250px using JavaScript on the desktop view. However, I want the sidebar to take up 100% width when viewed on mobile devices. Despite my attempts to use Media Queries in JavaScript to achieve this, I am ...

javascripthtmlcssmedia-queriessidebar

Effective Ways to Add Space Between Label and Textfield in React Using MaterialUI

Recently delving into the realm of React/MUI, I am faced with the challenge of crafting a login form that showcases a table-like structure where labels and TextFields align on the same row. A key requirement is to ensure equal spacing in the label column t ...

cssreactjsmaterial-ui

The Silent Disregard for CSS Files in React Rendered Pages

I'm currently working on a React application that I created using create-react-app. In my index.html file, I have linked it to my CSS file like this: <link rel="stylesheet" href="../src/site.css"></link> The content of the site.css file ...

cssreactjs

Modify the bootstrap dropdown background to display only an image

I am looking to make the image in a dropdown/dropup menu fill the entire background of the dropdown. Currently, there is still white space visible around the image. How can I ensure that the dropdown shows only the image and includes a scroll wheel? Addit ...

htmlcssbootstrap-4

Using PHP to convert JSON data into the Google Chart API

I am facing an issue with parsing my PHP generated JSON array into a Google chart. I have integrated JQuery, but for some reason, I am struggling to parse the JSON data. I execute a MySQL query to fetch data from the database. Then, I encode the query resu ...

javascriptphpajaxjsongoogle-visualization

What is the method to retrieve the second class name of an element?

I need help understanding how to extract the second class name from a list of class attributes. For instance, consider this HTML snippet: <div class="another exampleClass"></div> Is there a way to retrieve the second class named &quo ...

jqueryclass

I can't figure out why Ghostscript 9.53.3 is automatically rotating images

I've encountered an issue with ghostscript version 9.53.3 when trying to convert an eps image to png. For some unknown reason, the image gets rotated in the process. Below is a snippet of the command I execute in Java using command line arguments: [&q ...

javaimagepngghostscripteps

What are the steps to make a basic slider with jQuery without using plugins?

<script> const animateImages = function(){ $("#slider").animate({"left":"-=1775px"},10000,function(){ $("#slider").animate({"left":"0px"},10000); animateImages(); }); }; animateImages(); </script> I incor ...

javascriptjqueryloopsanimationimage-gallery

Allow submission of the form only when the start and end dates in the jQuery Datepicker are filled

$('#datepicker_start').datepicker({ dateFormat: 'd-M-y' , onSelect: function(selected) { $("#datepicker_end").datepicker("option","10-03-2015", selected) } }); $('#datepicker_end&ap ...

jquerydatepickerjquery-ui-datepicker

The variable $ has not been defined in Jquery framework

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="deployJava.js"></script> <script type="text/javascr ...

javascriptjqueryhtmljquery-uiweb

Loading input datalist in Firefox postponed

My goal is to implement an input field for a username that allows users to select from a wide range of names/usernames. I want them to be able to enter a partial string from the name or username. Instead of loading the entire list initially, I aim to load ...

javascripthtmljqueryformsautosuggest

Is there a way to trim the current shapes in three.js?

I have created a shape similar to this using Box Geometry at the following link: https://jsfiddle.net/cdu96z3c/. I am looking to achieve a design like the image below by properly utilizing v.x and v.z, while maintaining the current corrugation and properti ...

javascriptthree.js