jquery - 多次更改 mouseleave 上的类

Question

我的页面顶部有一个 Logo ，简单的悬停效果会改变 Logo 的颜色。我想做的是，每次用户将鼠标悬停在它上面时， Logo 都会循环显示几种不同的悬停效果。第一次悬停时 Logo 变为红色，下一次悬停时 Logo 变为橙色，经过大约 5 种颜色直到从红色开始。

我的想法是使用 jquery 删除旧类并添加一个具有新悬停效果的新类，直到最后我将添加回原始类。我的代码目前将 Logo 在第一次悬停时更改为红色，然后在第二次悬停时更改为橙色，但随后它卡在橙色。

这是我的 html:

    <div class="navbar-header">
        <div class="navbar-brand">
            <a href="/main" class="logo_1 logo"></a>
        </div>
    </div>

这是我的CSS:

    .logo {
        height:44px;
        width:161px;
        display:block;
    }

    .logo_1 {background-image: url(../images/logo.png);}
    .logo_1:hover {background-image: url(../images/red_logo.png);}

    .logo_2 {background-image: url(../images/logo.png);}
    .logo_2:hover {background-image: url(../images/orange_logo.png);}

    .logo_3 {background-image: url(../images/logo.png);}
    .logo_3:hover {background-image: url(../images/green_logo.png);}

    .logo_4 {background-image: url(../images/logo.png);}
    .logo_4:hover {background-image: url(../images/blue_logo.png);}

    .logo_5 {background-image: url(../images/logo.png);}
    .logo_5:hover {background-image: url(../images/purple_logo.png);}

这是我的 jquery:

    $('.logo_1').mouseleave(function(){
       $(this).addClass('logo_2');
       $(this).removeClass('logo_1');
    });
    $('.logo_2').mouseleave(function(){
       $(this).addClass('logo_3');
       $(this).removeClass('logo_2');
    });
    $('.logo_3').mouseleave(function(){
       $(this).addClass('logo_4');
       $(this).removeClass('logo_3');
    });
    $('.logo_4').mouseleave(function(){
       $(this).addClass('logo_5');
       $(this).removeClass('logo_4');
    });
    $('.logo_5').mouseleave(function(){
       $(this).addClass('logo_1');
       $(this).removeClass('logo_5');
    });

Answer 1

你有没有想过这样的事情？

var index = 1;
$(".logo").mouseleave(function() {
    $(this).removeClass("logo_"+index);

    index +=1;

    if(index <= 5) {
       $(this).addClass("logo_"+index);
    }
    else {
        $(this).addClass("logo_1");
        index=1;
    }
});

示例:http://jsfiddle.net/ntim/bT4T5/