Create a JavaScript/jQuery function that causes an element to fade in when the mouse is


I am currently developing a PHP/MySQL project that involves creating a function to display a brief description when a user hovers over an image. However, I seem to be encountering an issue where the function crashes after a few uses. Below is a snippet of the code and a JSFiddle link for reference:

JSFiddle: http://jsfiddle.net/c7d8g/

Code :
HTML :

<body>
    <div class="card">
        <img class="cover" src="http://www.unheap.com/wp-content/uploads/Blindify.png" />
        <div class="coverDetail">
            This is initially hidden
        </div>
        <div class="description">
            <a class="title" href="#">About this card</a>
            <p class="text">Description of this card.</p>
            <p class="author">@alex</p>
        </div>
    </div>
</body>

CSS:

.card {
    background: #0e0e0e;
    color:#a4a4a4;
    width:250px;
    height:320px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin-right:20px;
    margin-bottom: 15px;
    float: left;
}
.cover {
    max-width:250px;
    max-height:140px;
    background: transparent;
    float:left;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.coverDetail {
    position:absolute;
    width:220px;
    height:25px;
    margin-top: 114px;
    padding-left: 15px;
    padding-right: 15px;
    background: #e8ff28;
    border-top: 1px solid #ecf97e;
    overflow: hidden;
    z-index:100;
}
.description {
    width:100%;
    height:50%;
    display: block;
    margin-top:150px;
}
.title {
    color:#b4b4b4;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 20px;
    text-decoration: none;
    text-transform: uppercase;
    margin-top:5px;
    margin-left:10px;
    overflow: hidden;
}
.title:hover {
    color:#62c6ff;
    border-bottom: 1px dotted #d9f1ff;
}
.text {
    font-family: sans-serif;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    max-height: 85px;
    margin-top: 5px;
    margin-left: 10px;
    width:90%;
    overflow-y:hidden;
    overflow-x:hidden;
}
.author, a {
    bottom: 100%;
    font-family: sans-serif;
    text-decoration: none;
    text-transform: lowercase;
    font-size: 9px;
    margin-left: 15px;
}

JS function that I have, but it crashes: :

<script>
$(document).ready(function(){
    $(".cover").mouseover(function(){
        $(this).next().stop().fadeIn();
    });
    $(".cover").mouseout(function(){
        $(this).next().stop().fadeOut();
    });
});
</script>

My Question:
I am seeking a solution that will effectively fadeIn the "coverDetail" element in the card when a user hovers over the cover image, and fade it out when the user moves the mouse away. This function needs to work well for each individual card, as I have around 150 cards per page.
Thank you :)

javascriptjquerycss

Answer №1

In my opinion, I find it more preferable to utilize the .hover() method - Check out the Fiddle here

$(document).ready(function(){
    $(".card").hover(function () {
        $(".coverDetail", this).stop(true, true).fadeIn();
    }, function () {
        $(".coverDetail", this).stop(true, true).fadeOut();
    });
});

It's worth noting that there are a few minor tweaks made to your CSS in the Fiddle.

Answer №2

To start off, the initial step is to conceal the description: Insert the provided snippet into your CSS stylesheet:

.coverDetail {
    display: none;
}

Next, you must utilize the code below to toggle the visibility of the description for each card individually:

$(function () {
    $(".cover")
        .mouseout(function () {
        $(this).parent().children('.coverDetail').fadeOut();
    })
        .mouseover(function () {
        $(this).parent().children('.coverDetail').fadeIn();
    });
});

Here is an example for reference: JSFiddle

Answer №3

give this a shot Styles:

.coverInfo {
    position:relative;
    width:200px;
    height:30px;
    margin-top: 120px;
    padding-left: 10px;
    padding-right: 10px;
    background: #f0ff80;
    border-bottom: 2px solid #ecf97e;
    overflow: hidden;
    z-index:150;
    display:none;
}

JavaScript:

<script type="text/javascript>
    $(document).ready(function(){
        $('.cover').hover(function(){
            $('.coverInfo').stop().fadeIn()
            },function(){
                $('.coverInfo').stop().fadeOut()
        })

    }); 
</script>

Answer №4

If you prefer, you have the option to set the hover event on the card and execute an animation

.coverDetail {
    position:absolute;
    width:220px;
    height:0px;
    margin-top: 114px;
    padding-left: 15px;
    padding-right: 15px;
    background: #e8ff28;
    overflow: hidden;
    z-index:100;
}

jQuery:

<script type="text/javascript>
    $(document).ready(function(){
        $('.card').hover(function(){
            $('.coverDetail').stop().css({'border-top':'1px solid #ecf97e'}).animate({'height':'25px'},1000)
            },function(){
            $('.coverDetail').stop().css({'border-top':'0px'}).animate({'height':'0px'},1000)
        })
    }); 
</script>

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

Storing a PDF created with Laravel in a queue

I have a tool that converts HTML to PDF and saves it locally. I also use a live URL to fetch another PDF and save it on my local machine. Then, I utilize a Laravel library to merge both PDFs into a single file through embedding. Previously, this process ...

javascriptphplaravellaravel-5

Add an asterisk before each line of comment when working in a TypeScript file using the VS Code IDE

Within my VS Code workspace, I am using the Typescript language and would like to format my comments across multiple lines with a specific style (look out for the star character) /** *@desc any text * any text */ However, when I attempt to write a comm ...

javascripttypescriptvisual-studio-code

How to toggle the visibility of an element in an array using AngularJS and JavaScript

Is there a way to show additional information when an item in ng-repeat is clicked, and then hide this extra info when the mouse leaves that same item? One issue I am facing with the code snippet below is that when a user clicks on a different item, it al ...

javascriptjqueryangularjs

Display a webpage containing error messages and user input that can be sent back to the AJAX request

My form collects user information such as name, surname, etc. Here is an example of one input field: <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" name="name" value= ...

javascriptjqueryajaxlaravellaravel-blade

In what ways can you toggle the visibility of table rows and data dynamically with the onchange event in HTML?

I'm dealing with an HTML code that can dynamically change table data based on user selection. Here's the snippet of my HTML code: Select an option: <select name='set' id="set" class="selectpicker" onchange='displayFields(this. ...

javascriptjqueryhtml

Stop Scrolling on Web Pages with HTML5

I need assistance in preventing all forms of page scrolling within my HTML5 application. Despite searching on popular platforms like SO and Google, I have been unable to find a comprehensive solution for disabling all scrolling mechanisms entirely. Existin ...

csshtmlscrollviewport

Execute a post request upon clicking with NEXT JS, while also firing off a get request

I'm facing an issue where I need to post and get my data when clicking on the same button (similar to writing and displaying comments). However, whenever I click the button, everything seems to be working fine but a request with a 304 status code star ...

javascriptreactjsnext.js

Can Socket.IO link to a source tag that doesn't actually exist?

As I was following the 'Get started thing' tutorial on Socket.IO, I encountered a step that required me to add the socket.io.js script to my HTML page. The instruction provided was: /socket.io/socket.io.js However, when I checked my folders, I ...

javascripthtmlnode.jsexpresssocket.io

Retrieving Dropdown Values based on Selection in Another Dropdown

On my website, there are two dropdown lists available: 1) One containing Book Names 2) The other containing Links to the Books. All data is stored in an XML file structured like this: <?xml version="1.0" encoding="UTF-8"?> <BookDetail> <boo ...

javascripthtmlajaxxmlxslt

Having trouble achieving the desired effect with inline block

I'm having some trouble creating a simple store page. One of the products is supposed to look like this: https://i.sstatic.net/JLlua.png However, it's currently showing up like this: https://i.sstatic.net/hHYUm.png I've been attempting t ...

angularhtmltwitter-bootstrapcss

Is it possible to accomplish this straightforward task using PHP?

Essentially, my goal is to have the content inside the h1 tag duplicated in the h2 tag as well. Take a look at the example provided below. <!DOCTYPE html> <html> <body> <h1>The content here should also appear in the H2 tag.</h1 ...

phphtmlcss

Hybrid component that combines static and dynamic elements in Gatsby

The inconsistency in behavior between the site generated by gatsby develop and gatsby build is causing an issue where the site works during development but not when it's in production. An overview of my website: My website is a simple blog-like plat ...

javascriptreactjsgatsby

Expanding a feature that modifies the CSS properties of every input element

Creating a text tracking (letter-spacing) demonstration where range sliders are used to update CSS properties. I'm looking to improve the functionality so that the labels also update dynamically, without repeating output2.textContent = this.value;. An ...

javascriptcss

Turning off devtools in Next.js

Currently, my focus is on developing an application using Next.js and I am in search of a way to prevent the opening of devtools. While exploring npm packages, I came across a promising tool called Disable-devtool - npm link. However, Next.js keeps present ...

javascriptreactjsnext.jsdevtoolsdisable

Converting JSON array to custom object array in TypeScript

As a newcomer to this area, please excuse any inaccuracies in my language. Don't hesitate to ask for more details if needed. I currently have some TypeScript interfaces: export interface Item { id: string type: string state: string } ex ...

javascripttypescript

Opening a new window in JavaScript and passing additional parameters

I am facing an issue with my JavaScript link There is a hidden input field named "domain" Below is a div with an onclick script: <div id="button" onclick="window.open('http://www.mylink.nl/?domein=' + document.getElementById('domein&ap ...

javascripthtmlwindow

Using web3Provider in a Next.js environment

While attempting to integrate Web3-react v6 into my Next JS project, I encountered an error when trying to wrap my entire app with the provider. In _app.jsx, I included the following code: import React from 'react'; import { Web3ReactProvider } ...

javascriptreactjsnext.jsweb3-react

What is the best way to create a non-reactive value in Vue.js?

In my Vue.js app, I am facing an issue where an array value is becoming reactive even though I want it to remain un-reactive. The array should only be updated when a specific "refresh" action is completed. However, every time a new value is assigned to the ...

javascriptvue.jsvuejs2vuejs3

When making a POST request using formData through AJAX, the $_POST variable remains empty

Below is the form: <form id="complaintForm" enctype="multipart/form-data" method="POST"> <input type="number" id="isComplaintForm" value="1" hidden> <label for="fname&q ...

javascriptphphtmlajax

Navigation Menu Spanning Across Full Width of All Screens

Hello! I am currently working on designing a responsive menu using HTML5 and CSS. My approach involves creating a navigation menu for desktop computers and implementing a checkbox with a label to reveal the responsive menu when needed. Here is the code s ...

csshtml