4

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
            });
        });
    });
});

4 Answers 4

3

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/

6
  • 1
    +1 but even better than doing a check for ie would be to use modernizr and check for css animations
    – steveax
    Jul 3, 2012 at 7:29
  • The advantage with this method, is for Chrome, Safari, and Firefox - you don't have to use any javascript at all! And we only have to use js for pesky IE.
    – Jon Jaques
    Jul 3, 2012 at 7:29
  • Agreed, but I thought that might be getting a little ahead of ourselves :)
    – Jon Jaques
    Jul 3, 2012 at 7:30
  • That is the effect i was looking for! +1 by me!!
    – Dejo Dekic
    Jul 3, 2012 at 7:32
  • 1
    I would definitely use the addClass animating ability that jquery ui has, rather than animating inline style. If I used jquery ui, that is.
    – Joonas
    Jul 3, 2012 at 7:33
1

If I understand what you're trying to achieve here, this looks like it would be solved with one line of CSS. e.g...

.link:hover { background-color: yellow;}

The reason you can't see your text is cause opacity: 0 renders it invisible.

1
  • Thx for answer!! Didnt work:( I know that opacity is the problem but don't know how to achieve that my text shows:(
    – Dejo Dekic
    Jul 3, 2012 at 7:10
1

Change it so that the grey background color is applied to the li style and not the link itself. Take off the animate opacity line for .link as well.

Maybe something like this? http://jsfiddle.net/5bXHW/

1
  • Txh for answer but look's like I will have to use jquery UI!
    – Dejo Dekic
    Jul 3, 2012 at 7:29
1

I played around with opacity to get this result, looks much better now http://jsfiddle.net/kyWth/37/ link's opacity and span opacity is both set to 0.5 now. Is it any near to what you want?

UPDATE Made changes to your code here http://jsfiddle.net/kyWth/39/ , works perfect, you don't need the span either.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.