Question

I am trying to create following effect: when I hover over my link, that link changes color, this part work’s but problem with my code is that i cannot see my text when i hover over. I know that i can solve this by adding images to my span and anchor tag and I also know that there is a plugin that animates color, but IF POSSIBLE i would like to solve this WITHOUT background images and plugins. Is that possible?
I created this FIDDLE for you to see my problem.

My code:

$(document).ready(function () {
    $('.link').hover(function () {
        var heightCheck = $(this).outerHeight();
        //alert(heightCheck);
        $(this).stop().animate({
            opacity: 0
        }, 1000);
        $('.yellow').height(heightCheck);
        $('.yellow').css({
            'margin-top': -heightCheck
        });
    }, function (heightCheck) {
        $(this).stop().animate({
            opacity: 1
        }, 1000, function () {
            $('.yellow').css({
                'margin-top': +heightCheck
            });
        });
    });
});

Answer 1

Well, you’re already using jQuery, why not use jQuery UI (the plugin you reference) and do everything with one element.

Think about it, are you going to remember to include that extra .yellow span every time you want a link like that?

Also, why not use progressive enhancement and do this all with CSS? You could even do a jQuery fallback for IE?

See my attached Fiddle.

http://jsfiddle.net/nzcGy/3/