带有动画的jquery UI添加类不起作用答案

【问题标题】：jquery UI add class with animation does't work带有动画的jquery UI添加类不起作用
【发布时间】：2015-02-21 09:26:06
【问题描述】：

查看我的 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 版本，但没有任何变化。

有什么想法吗？

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

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

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

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

【讨论】：

太棒了。这里的浏览器兼容性如何？
+ 知道为什么我的小提琴，例如addclass 方法不起作用？
很好的答案，但要添加它，您将需要前缀。 -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; 最后，您可以通过 $('#wallpaper').removeClass().addClass(...); 链接 JQuery 方法
@DeanMartin 这些天不需要前缀。如果需要 Andriod 支持，也许只有 -webkit。
@DonMB 我仍然不知道为什么您的代码不起作用。它与 jquery 页面告诉的相同。我在小提琴中尝试了很多东西，但没有任何效果。你确定你正确加载了 Jquery 和 JqueryUI 吗？

【解决方案2】：

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

我这是你的新脚本：

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

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

看看fiddle

【讨论】：