Question

所以我有一个通过jQuery交替背景颜色的div列表。这些还具有更改背景颜色的翻转。问题是，翻转功能只允许我在mouseout上将这个类动画回一个背景颜色，但就像我之前说过的那样，我有一个交替的背景颜色。我怎么能在jQuery中处理这个？我下面的代码是我尝试使用偶数和奇数的if，else语句，但我不知道正确的语法。

$(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)
        }
    })
})

Answer 1

只需使用css：

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

演示：http://jsfiddle.net/maniator/npWnm/

如果你只想使用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'));
    });
});

完全后备：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'));
    });
});

Tigerstipe翻转难题

1 个答案: