Question

请参阅我的jsfiddle（对于将javascript放入html正文而道歉，但不知何故，它无法将其放在javascript字段中）：

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

所以我首先删除当前的css类，然后根据select项中的值添加一个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

我现在有一个关于图像更改的动画。我首先让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添加带动画的类不起作用

2 个答案: