开发者

Tigerstipe rollover conundrum

开发者 https://www.devze.com 2023-04-11 12:20 出处:网络
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 ani

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

精彩评论

暂无评论...
验证码 换一张
取 消