Question

I am trying to make something, and I started reading about jQuery just yesterday, so it doesnt go well for me yet 🙂

However what I am trying to make is to swap the image of my logo on mouseenter/leave or hover depends on whats better…

So here is what I made and it’s definetly bad but …

    $(document).ready(function() {
    var logo = $('#logo');

    logo.on('mouseenter', function() {
        logo.css('background-image', 'url("img/logo2.png")');
    });
    logo.on('mouseleave', function() {
        logo.css('background-image', 'url("img/logo.png")');
    });
});

This works fine, it’s probably not great code either… but theres no animation like fadeIn and fadeOut… I don’t know how to make it.

Help me to make this please and thanks in advance!

Answer 1

In order to fade in the image you will have to load both images to begin with, one on top of the other with absolute positioning and appropriate z-index.

Then you just have to make the image ‘on-top’ fade-out when you hover over it, to reveal the one underneath. So you never actually have to adjust the background-image of the element.

<div id="logo-container" style="position:relative;">
    <div id="logo-above" style="position:absolute;z-index:2">
        <img src="img/logo1.png" />
    </div>
    <div style="position:absolute;z-index:1">
        <img src="img/logo2.png" />
    </div>
</div>

<script>
    $(document).ready(function() {
        var $logoContainer = $('#logo-container');
        var $logoAbove = $('#logo-above');

        $logoContainer.on('mouseenter', function() {
            $logoAbove.fadeOut();
        });
        $logoContainer.on('mouseleave', function() {
            $logoAbove.fadeIn();
        });
    });
</script>

p.s. its good practice to prefix variables that are ‘jqueryfied’ with $ so you know not to call jquery on them again. eg $logoContainer.