Question

This has probably been asked a lot, and I see a whole bunch of different solutions, some of which I cant get to work myself.

My goal is to build a menu, however to start out, it would be a good idea to get a single button working first, yeah?

So I tried to follow the Dragon Interactive tutorial

Heres my code:

CSS:

#navigation a { 
    position: relative; 
    }

#navigation a .hover {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    }

Javascript:

<script type="text/javascript" language="javascript">
$(document).ready(function(){
$(".hover").css({'opacity':'0'});
$('#navigation li a').hover(function() {

    // Stuff that happens when you hover on
    $('.hover').animate({
        'opacity': 1
        }, 700)

},function() {

    // Stuff that happens when you unhover
    $('.hover').animate({
        'opacity': 0
        }, 700)

});
});


</script>

And of course the HTML markup.

<p>
Just some random giberish here, to make sure the positioning
<br>
works regardless of what junk I have before and after it. :)
</p>

<ul id="navigation" style="list-style-type: none; list-style-position:outside;">
<li>
<a href="http://google.com"><img id="btn1" border="none" src="https://dom28edjsbv6i.cloudfront.net/Images/GetPlan.png" />
</a><span class="hover"><img src="https://dom28edjsbv6i.cloudfront.net/Images/GetPlan_MO.png" /></span>
</li>

</ul>

I’ve tried changing different parameters, and I am completely lost.

Should I use a div, and animate the background image? Would that produce the same “img” link effect, or is that just bad coding?

Basically, what I am asking, is a minimal solution that is replicateable. 🙂

Answer 1

There are many ways to accomplish this effect, for example a pure CSS3 approach or the JavaScript approach you have taken. If you have specific browser requirements then the JavaScript approach is probably the best option.

The problem in your existing code is that the animation events will fire continually whilst the cursor is hovering. You should look into the mouseenter() and mouseleave() jQuery events and also stop() so that quickly entering and leaving the <a> does not queue up lots of fade in/out animations.

The other problem you have is that the non-hovered <img> and hovered <img> are next to each other. It is a better approach to keep the HTML simple and usable without the JavaScript hovering effect. Therefore use one <img> tag with the the non-hovered src and manipulate the src and opacity in JavaScript to create the hover effect.

Edit: Here is just one way of doing it. It works by clone()ing the <img> first, which due to the combination of position:relative on the parent <a> and position:absolute on the <img> places the clone directly over the top of the original. The opacity of the clone is then animated. It relies on your hovered images always ending with _MO. This is an unobtrusive way of doing this, since a user without JavaScript (they still exist!) will have clean single image HTML.

An alternate approach could be to use CSS sprites but you will still have solve the fading.

There are plenty of browsers that would support the CSS3 approach, Firefox 4+, Chrome, Safari, Opera, IE9. In my experience, your target audience often dictates what approach is taken when it comes to this sort of development.

Edit 2: Code clarification…

$('#navigation li a img').each(function(index) {
    $(this).clone().css({'opacity':0}).attr('src', $(this).attr('src').replace('.png','_MO.png')).appendTo($(this).parent());
});

… takes each <img> descendent of an <a>, first cloning that <img> element, then sets the opacity to 0 (hidden), then changes the src attribute of the clone to the hovered version of the image and then adding the cloned DOM element as a child of the <img>s parent node in the DOM, which is the <a>. It takes advantage of jQuery chaining, but could be written explicitly as:

$('#navigation li a img').each(function(index) {
    var clonedImgElement = $(this).clone();
    var parentAnchorElement = $(this).parent();
    var originalSrc = $(this).attr('src');
    var hoveredSrc = originalSrc.replace('.png','_MO.png');
    clonedImgElement.css({'opacity':0}); // hide clone first
    clonedImgElement.attr('src', hoveredSrc); // update the src to the hovered version
    clonedImgElement.appendTo(parentAnchorElement); // attach clone to anchor in DOM
});

Edit 3:

You could also replace the hover code with:

$('#navigation li a').mouseenter(function() {
    $(this).find('img').filter(':last').stop().animate({'opacity':1});

}).mouseleave(function() {
    $(this).find('img').filter(':last').stop().animate({'opacity':0});
});

which according to :last offers better performance.

Edit 4 Updated demo to work with images in other containers, now only position the clones rather than all images so that the non-hovered images still exist in normal page flow and also works with images not at top:0;left:0