Tigerstipe rollover conundrum
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)
}
})
})
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'));
});
});
精彩评论