Issue with fadeIn effect not functioning properly on the second child element

Question

Issue with fadeIn effect not functioning properly on the second child element

Requesting assistance with troubleshooting my code. The intended functionality is to animate the img tags using fadeIn and fadeOut, but currently only the first image fades out without the second image fading in. I suspect there may be an issue in my CSS that prevents the second image from displaying as intended. No error messages are being generated.

This involves one image overlapping another.

jQuery

$(document).ready(function() {
    $('.social-media a').on('mouseenter', function(e) {
        $(this).find("img:nth-child(2)").fadeIn();
        $(this).find("img:nth-child(1)").fadeOut();
    });
})

HTML

<div class="social-media">
    <a title="Share On Twitter" href="#">
         <img alt="" src="images/icon_twitter.png" />
         <img class="test" alt="" src="images/icon_twitter_active.png" />
</a>
</div>

CSS

.social-media {
    padding-top: 20px; 
    width: 166px; 
    margin: 0 auto 10px auto;
}
.social-media a {
    position: relative;
    width: 55px;
    height: 51px;
}
.social-media a img:nth-child(1) {
    opacity: 1;
}
.social-media a img:nth-child(2) {
    position: absolute;
    left: 0; top: -33px;
    opacity: 0;
    z-index: 2; 
}

javascript jquery css

Answer 1

Answer №1

Swapping out the technique of hiding the second <img> element with zero opacity, you might want to opt for using display: none instead:

.social-media a img:nth-child(2) {
    position: absolute;
    left: 0; top: -33px;
    display: none;
    z-index: 2; 
}

http://jsfiddle.net/8vH4E/

Nevertheless, I suggest considering a straightforward CSS image sprite approach to achieve the desired effect without needing JS.

Update: In response to the question about achieving this with CSS alone, I have adjusted the Fiddle to not use JS and simply rely on CSS along with pseudo-elements: http://jsfiddle.net/8vH4E/2/

.social-media a {
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
    background-image: url(http://placehold.it/200x200);
    background-size: cover;
}
.social-media a::before {
    background-image: url(http://placehold.it/200x200/4a7298/eeeeee);
    background-size: cover;
    content: '';
    display: block;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
.social-media a:hover::before {
    opacity: 1;
}

The plan here is quite simple:

Utilize background images instead. The sizing uses cover, but feel free to choose any sizing method (absolute pixel/point sizes, relative percentage sizes, or dynamically-computed like cover, contain)
For hover effects, employ an absolutely-positioned pseudo-element that covers the entire <a> (by positioning it absolutely with zero offsets in all directions). Exclude pointer events on the pseudo-element by setting pointer-events: none
When hovering over the <a> element (targeted with :hover selector), switch the opacity of the pseudo-element from 0 to 1. Include the transition property on the pseudo-element for smooth transitions handled by browsers independently of JS.

Answer 2

Swapping out the technique of hiding the second <img> element with zero opacity, you might want to opt for using display: none instead:

.social-media a img:nth-child(2) {
    position: absolute;
    left: 0; top: -33px;
    display: none;
    z-index: 2; 
}

http://jsfiddle.net/8vH4E/

Nevertheless, I suggest considering a straightforward CSS image sprite approach to achieve the desired effect without needing JS.

Update: In response to the question about achieving this with CSS alone, I have adjusted the Fiddle to not use JS and simply rely on CSS along with pseudo-elements: http://jsfiddle.net/8vH4E/2/

.social-media a {
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
    background-image: url(http://placehold.it/200x200);
    background-size: cover;
}
.social-media a::before {
    background-image: url(http://placehold.it/200x200/4a7298/eeeeee);
    background-size: cover;
    content: '';
    display: block;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
.social-media a:hover::before {
    opacity: 1;
}

The plan here is quite simple:

Utilize background images instead. The sizing uses cover, but feel free to choose any sizing method (absolute pixel/point sizes, relative percentage sizes, or dynamically-computed like cover, contain)
For hover effects, employ an absolutely-positioned pseudo-element that covers the entire <a> (by positioning it absolutely with zero offsets in all directions). Exclude pointer events on the pseudo-element by setting pointer-events: none
When hovering over the <a> element (targeted with :hover selector), switch the opacity of the pseudo-element from 0 to 1. Include the transition property on the pseudo-element for smooth transitions handled by browsers independently of JS.

Answer 3

Answer №2

The graphic looks nice, but the transition could be smoother (I believe that was the main issue, wasn't it?).

Let's improve the current code:

When using fadeOut(), make sure to set the element to display: none; state first, as fadeIn() starts when the element is in that state. So, initially hide the second image by setting it to display: none;;
We can remove the opacity adjustments for both images and rely on the default value of 1.0; $.fadeIn/Out() will use the opacity values from the CSS for the animation. However, you can specify opacity for each image if needed;
Using display: inline-block; for the <a> tag is important because it contains inline elements which might disappear (display: none;), causing the entire <a> tag to vanish and triggering unexpected UI issues during mouseleave events.

Check out this example http://jsfiddle.net/8vH4E/1/ and shoutout to Terry for creating the fiddle :)

Answer 4

The graphic looks nice, but the transition could be smoother (I believe that was the main issue, wasn't it?).

Let's improve the current code:

When using fadeOut(), make sure to set the element to display: none; state first, as fadeIn() starts when the element is in that state. So, initially hide the second image by setting it to display: none;;
We can remove the opacity adjustments for both images and rely on the default value of 1.0; $.fadeIn/Out() will use the opacity values from the CSS for the animation. However, you can specify opacity for each image if needed;
Using display: inline-block; for the <a> tag is important because it contains inline elements which might disappear (display: none;), causing the entire <a> tag to vanish and triggering unexpected UI issues during mouseleave events.

Check out this example http://jsfiddle.net/8vH4E/1/ and shoutout to Terry for creating the fiddle :)

Issue with fadeIn effect not functioning properly on the second child element

Answer №1

Answer №2

Similar questions

Trouble aligning CSS Nav Bar to the right with Flexbox

Display all files within every subdirectory located in a specified folder on Google Drive

Retrieve the value from the URL by parsing it using JSON

"Exploring three.js: Transforming a plane's orthogonal vector into a rotation matrix for the plane

What is the method for extracting information from a dropdown menu using AJAX and transmitting it to a PHP script?

Interactive Image with Description and Redirect

Tips for effectively integrating d3 as a Laravel dependency and linking it to a constant:

Pairing two actions with a single event

JQuery: Unacknowledged Modifications to Classes

Extract the text located within a specific span using Selenium

View Preview Image using the following image tag in JavaScript

Sending checkbox selections to JavaScript

Attempting to divide the given web address

Combining D3 and D3plus in an Angular web application: A complete guide

In a production environment, jQuery's ajax functionality may encounter issues specifically on Internet Explorer

Utilize getJSON to refresh the JavaScript datetimepicker

Each time guildMemberAdd is triggered in Discord.js, it may not run consistently

Consistent header and footer that remain fixed at the top and bottom of each page

Display fewer categories (list items) on mobile and medium-sized devices

Passing PHP success and error messages to Javascript