jquery UI 添加 class 动画不起作用

Question

查看我的 jsfiddle（很抱歉将 javascript 放入 html 正文，但不知何故将其放入 javascript 字段无效）：

我想通过 select 从 select 字段（最右侧）更改 #wallpaper div 的 css classes .

所以我先删除当前的css class然后根据select项的值添加一个cssclass

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

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

};

我在此处关注 jquery UI 文档：http://api.jqueryui.com/addclass/ 因为我想在添加新的 class 时有一个动画。

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

有什么想法吗？

Answer 1

我现在有一个关于图像变化的动画。我首先让 Jquery 更改图像，然后将不透明度设置为 0，然后使用 jquery animate() 将不透明度设置为 1.

我这是你的新剧本：

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

    $("#wallpaper").addClass("wallpaper_" +      $("#select_category").val()).css('opacity','0').animate({opacity:'1'});
 };

看看fiddle

Answer 2

您需要在CSS中定义转换规则。然后背景图片会随着动画效果变化：

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

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

jquery UI 添加 class 动画不起作用

jquery UI add class with animation does't work

javascript

jquery

jquery-ui