Tigerstipe rollover conundrum

Question

So I have a list of divs that have alternating background colors through jQuery. These also have rollovers that change the background color. The problem is, the rollover function only allows me to animate this class back to one background color on mouseout, but like I said before, I have an alternating background color. How can I handle this in jQuery? My code below was my attempt at an if, else statement with even and odd, but I don't know the proper syntax.

$(document).ready(function() {
    $('.whycapad_staff:even').css({"background-color":"#eaebeb"});
    $('.whycapad_staff').hover(function() {
        $(this).stop().animate({"background-color":"#5facf8"}, 300);
    }, function(){
        if ($(this = ':even')){
            $(this).stop().animate({"background-color":"#eaebeb"}, 300)
        };
        else {
                $(this).stop().animate({"background-color":"#FFFFFF"}, 300)
        }
    })
})

Why are you using JavaScript to do what can be done with CSS? — Matt Ball, Oct 06 '11 at 18:50
because the individual divs are dynamically generated and i want to use jQUERY — A_funs, Oct 06 '11 at 18:52
Don't downvote. It's not a bad question, it just may not be a good design decision. Instead point him towards a better solution. http://meta.stackexchange.com/questions/33286/downvotes-versus-close-votes-on-questions . On second thought, his use of animations and the fact that :even selector isn't supported by IE8 may mean that this is actually a very good question. — mrtsherman, Oct 06 '11 at 18:59

Naftali · Accepted Answer · 2011-10-06T19:07:24.293

5

Just use css:

.whycapad_staff:nth-child(even) {
     background-color:#eaebeb;
}
.whycapad_staff:hover {
     background-color:#5facf8;
}

Demo: http://jsfiddle.net/maniator/npWnm/

Here is an example if you just want to use jQuery: http://jsfiddle.net/maniator/npWnm/5/

$(function() { //jQuery fallback
    $('.whycapad_staff').hover(function() {
        $(this).data('b-color', $(this).css('background-color'));
        $(this).css('background-color', '#5facf8');
    }, function() {
        $(this).css('background-color', $(this).data('b-color'));
    });
});

Full fallback: http://jsfiddle.net/maniator/npWnm/9/

$(function() { //jQuery fallback
    $('.whycapad_staff').each(function(index, item){
        if(index%2 == 1){
            $(this).css('background-color', '#eaebeb');
        }
    });
    $('.whycapad_staff').hover(function() {
        $(this).data('b-color', $(this).css('background-color'));
        $(this).css('background-color', '#5facf8');
    }, function() {
        $(this).css('background-color', $(this).data('b-color'));
    });
});

edited Oct 06 '11 at 19:07

answered Oct 06 '11 at 18:51

Naftali

144,921
39
244
303

Needs transitions to handle the animation, then when you package it all together you have to consider browser support. Nothing wrong with using jQuery for that, as all these CSS properties will not work in IE8 for example. Many of us, if not most, need stuff to work cross browser. – Wesley Murch Oct 06 '11 at 18:56
An animation in `300ms` is basically the same as a css change. – Naftali Oct 06 '11 at 18:57
Yea exactly, that is CSS3 too if I am not mistaken – A_funs Oct 06 '11 at 18:58
@WesleyMurch also, you cannot use jQuery animate with css color natively – Naftali Oct 06 '11 at 19:01
@A_funs I made a javscript fallback and added it to my answer. – Naftali Oct 06 '11 at 19:01
doesn't that still rely on css3? – A_funs Oct 06 '11 at 19:04
Thanks Neal, do they pay you guys? why such determination? – A_funs Oct 06 '11 at 19:15
@A_funs nope. just to help future pplz with the same issue. (you can post answers as well with the knowledge you acquire). – Naftali Oct 06 '11 at 19:16
wait but now there is now animation! – A_funs Oct 06 '11 at 19:17
@A_funs there is no animation with just plain css. – Naftali Oct 06 '11 at 19:18
I will pass on what little knowledge i do have certainly. @Neal, I did want the animation aspect of this, that's why I was intent on using the jquery – A_funs Oct 06 '11 at 19:33
@A_funs jQuery has no color animations natively – Naftali Oct 06 '11 at 19:51
@A_funs are you using jQuery UI? – Naftali Oct 06 '11 at 19:56
yea, the color animations were working before, I do ahve the UI libs in my headers – A_funs Oct 06 '11 at 20:20
@Neal, A_funs: You can actually do animation with CSS, look up CSS transitions. – Wesley Murch Oct 06 '11 at 21:22
@WesleyMurch that was the whole thing... The OP did **not** want to use CSS3 for anything... – Naftali Oct 07 '11 at 13:26

Tigerstipe rollover conundrum

1 Answers1

Linked