javascript - jquery UI 添加带有动画的类不起作用

Question

查看我的 jsfiddle(很抱歉将 javascript 放入 html 正文中，但不知何故将它放入 javascript 字段中不起作用):

http://jsfiddle.net/40mga4vy/

我想通过从选择字段(最右侧)中选择它来更改 #wallpaper div 的 css 类。

所以我首先删除当前的 css 类，然后根据选择项的值添加一个 css 类。

function changeBackground() {
    $('#wallpaper').removeClass();

    $("#wallpaper").addClass("wallpaper_" + $("#select_category").val(), 1000, "easeOutBounce");

};

我在这里关注 jquery UI 文档:http://api.jqueryui.com/addclass/ 因为我想在添加新类时有一个动画。

但是，没有动画! 我尝试了各种 jquery 和 jquery UI 版本，但没有任何变化。

有什么想法吗？

Answer 1

您需要在 CSS 中定义过渡规则。然后背景图像会随着动画效果而变化:

#wallpaper {
    /* ... */
    transition: all .4s ease;
}

演示: http://jsfiddle.net/40mga4vy/2/