Javascript jquery ui switchClass（）未按预期工作

我很难让switchClass函数像jquery站点上的示例中那样很好地淡出。基本上，时间似乎没有任何效果，我尝试了40000-4次，但没有任何区别

我在下面贴了一个提琴（这可以更好地解释），但下面是我正在使用的代码。有两个div用于切换类，因此背景图像不同。我对每个div使用不同的方法，但它们都给出完全相同的结果，即使一个使用switchClass，另一个使用addClass

$(document).ready(function() {
    $('.iamatrainer').hover(function(){
        $(this).switchClass('iamatrainer', 'iamatrainerhover', 400, 'easeInOutQuad');
        }, function(){
            $(this).switchClass('iamatrainerhover', 'iamatrainer', 400, 'easeInOutQuad');
    });
    $('.iusetrainer').hover(function(){
        $(this).addClass('iusetrainerhover', 400);
        }, function(){
            $(this).removeClass('iusetrainerhover', 400);
    });
});

---

有人能帮我吗？

你确定你已经加载了jQueryUI吗？switchClass方法不是jQuery的一部分。你的小提琴正在抛出JS控制台错误

你真的不需要JS。只需设置

：将
悬停在
.iamatrainer
和
.iusetrainer
元素上即可

另外，如果您必须使用背景图像

确保你使用了一些合理的图像替换技术
考虑使用精灵和：悬停偏移，这样你就不会得到那个讨厌的延迟
您可以使用伪选择器和

CSS:
这是您的最新信息。
此外，您最好将图像合并到一个文件中并用于
：hover
state
嘿，谢谢您的回复。我认为这是一种方法，但在小提琴上的过渡仍然是相当即时的。我想让它淡入蓝色，此时它只需切换您使用的浏览器？背景图像上的过渡目前仅在webkit中起作用。如果我使用firefox。。。我认为这就是问题所在，然后jquery被加载好了。用淡入淡出法替换另一幅图像的最佳方法是什么？
.iamatrainer{
    background:url(http://renegadeox.com/iamatrainer.png);
    height:70px;
    width:512px;
    transition: background 0.3s linear;
}

.iamatrainer:hover{
    background:url(http://renegadeox.com/iamatrainerhover.png);
    height:70px;
    width:512px;
    transition: background 0.3s linear;
}