CSS：

Question

我很难让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);
    });
});

http://jsfiddle.net/KJbA8/

任何人都可以帮助我吗？

Answer 1

您确定要加载jQueryUI吗？ switchClass方法不是jQuery的一部分。你的小提琴正在抛出JS Console错误。

你真的不需要JS。只需在:hover和.iamatrainer元素上设置.iusetrainer即可。 http://jsfiddle.net/y3ALr/3/

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

确保使用一些合理可访问的图像替换技术
考虑使用精灵和：悬停偏移，这样你就不会遇到那种令人讨厌的延迟。

Answer 2

您可以使用:hover伪选择器和css transitions

CSS：

.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;
}

这是您更新的Demo。

此外，您最好将图片合并为一个，并使用background-position进行:hover州

jquery-ui switchClass（）没有按预期工作

2 个答案:

CSS：

这是您更新的Demo。