jQuery UI添加类与动画不起作用 [英] jquery UI add class with animation does't work

问题描述

请参阅我的jsfiddle(为将javascript放入html主体中而道歉，但以某种方式将其放在javascript字段中不起作用)

See my jsfiddle (apologies for putting the javascript into the html body but somehow it did not work placing it in the javascript field):

http://jsfiddle.net/40mga4vy/

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

I want to change css classes of the #wallpaper div by selecting it from a select field (far right side).

因此，我首先删除当前的CSS类，然后根据选择项中的值添加一个CSS类.

So I first remove the current css class and then add a css class based on the value from the select item.

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

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

};

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

I am following the jquery UI documentation here: http://api.jqueryui.com/addclass/ because I want to have an animation when the new class gets added.

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

However, there is no animation! I tried various jquery and jquery UI versions but nothing changes.

有什么想法吗?

推荐答案

您需要在CSS中定义转换规则.然后背景图片将随着动画效果而改变:

You need to define transition rule in CSS. Then background image will change with animation effect:

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

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

这篇关于jQuery UI添加类与动画不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！