Alter attribute with an impact

Question

Alter attribute with an impact

I am looking for a solution to switch the image source using attr, while also incorporating a fade effect in the process. I have attempted to implement one of the suggestions from another post, but it is not producing the desired outcome.

Current Appearance: http://jsfiddle.net/zeaVx/

The existing setup results in a complete fade-out before transitioning to the new image. This is not the effect I am aiming for. I want the transition to be immediate, similar to CSS's :hover, but with a fading animation included.

How can I accomplish this task?

javascript jquery html css

Answer 1

Answer №1

To achieve a fading effect, you can create two separate <img> tags and place them in a container. Stack one image on top of the other and then apply a fade in/out transition to the top image.

HTML

<div class="image-container">
    <img src="http://i.imgur.com/q4A2GtV.png" />
    <img src="http://i.imgur.com/jztqeIv.png" />
</div>

CSS

.image-container {
    position: relative;
}
.image-container img {
    position: absolute;
    left: 0;
    top: 0;
}

JQuery

$('.image-container').hover(function () {
    $(this).find('img:last-child').stop().fadeOut();
}, function () {
    $(this).find('img:last-child').stop().fadeIn();
});

DEMO: http://example.com/demo

Answer 2

To achieve a fading effect, you can create two separate <img> tags and place them in a container. Stack one image on top of the other and then apply a fade in/out transition to the top image.

HTML

<div class="image-container">
    <img src="http://i.imgur.com/q4A2GtV.png" />
    <img src="http://i.imgur.com/jztqeIv.png" />
</div>

CSS

.image-container {
    position: relative;
}
.image-container img {
    position: absolute;
    left: 0;
    top: 0;
}

JQuery

$('.image-container').hover(function () {
    $(this).find('img:last-child').stop().fadeOut();
}, function () {
    $(this).find('img:last-child').stop().fadeIn();
});

DEMO: http://example.com/demo

Answer 3

Answer №2

Here is a helpful resource for you to use: jsfiddle.net/Curt/PLwam/1/. Check it out!

Answer 4

Here is a helpful resource for you to use: jsfiddle.net/Curt/PLwam/1/. Check it out!

Answer 5

Answer №3

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var isActive = false;

            $(function() {
                $('#icon')
                        .mouseover(function() {
                    if (!isActive) {
                        isActive = true;
                        $(this).hide();
                        $(this).attr('src', 'image2.jpg').fadeIn('slow');
                        isActive = false;
                    }
                })
                        .mouseout(function() {
                    if (!isActive) {
                        isActive = true;
                        $(this).hide();
                        $(this).attr('src', 'image1.jpg').fadeIn('slow');
                        isActive = false;
                    }
                });
            });
        });
    </script>
</head>
<body>
    <img src="image1.jpg" id="icon" alt="Facebook icon">
</body>
</html>

Answer 6

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var isActive = false;

            $(function() {
                $('#icon')
                        .mouseover(function() {
                    if (!isActive) {
                        isActive = true;
                        $(this).hide();
                        $(this).attr('src', 'image2.jpg').fadeIn('slow');
                        isActive = false;
                    }
                })
                        .mouseout(function() {
                    if (!isActive) {
                        isActive = true;
                        $(this).hide();
                        $(this).attr('src', 'image1.jpg').fadeIn('slow');
                        isActive = false;
                    }
                });
            });
        });
    </script>
</head>
<body>
    <img src="image1.jpg" id="icon" alt="Facebook icon">
</body>
</html>

Alter attribute with an impact

Answer №1

HTML

CSS

JQuery

Answer №2

Answer №3

Similar questions

If an Angular reactive form component has a particular value

When attempting to remove an object from an array in Vue.js, an error may occur stating that the property of the

The functionality of the bootstrap grid system may vary depending on the size of the device being

Tips for preserving the horizontal scroll position of a div following a toggle using the "blind" effect

Center float elements with a percentage width

Dispatching actions in `componentDidMount` is restricted in Redux

Effortlessly find data in an HTML table and showcase the results instantly without

Comparing the use of jQuery's data() method versus directly accessing attributes with native JavaScript using get

How to enhance a class in JavaScript by adding a dynamic property

Creating Dynamic Input Binding in Vue.js with an Array of Computed Properties

Tips on selecting the active color ID from a list of available color IDs

Floating elements overlapping fixed elements

Is there a way to capture the click event of a dynamically generated row within a panel?

How do I integrate a button into my grey navigation bar using tailwindcss in REACT?

Utilizing the @page CSS rule in Vue.js: A step-by-step guide

A Step-by-Step Guide to Launching PDF Blob from AJAX Response in a Fresh Chrome Tab

In JavaScript, provide a boolean response to a callback function from a separate function

Combine several JSON files into a single file

Methods for transforming a TypeScript class instance containing getter/setter properties into a JSON format for storage within a MySQL database

How to eliminate the vertical scroll indicators in Material UI's TextField