Question

我想在1800 milisec的时间内更改输入字段的CSS。它有效，但没有平稳过渡。我必须在某个地方放一个淡入淡出吗？我在这里缺少什么：

$(".div-input").blur(function () {
     $('.div-input').removeClass("div-input", 1800).addClass('div-input-second');
});

Answer 1

看起来只有一个的无效参数，您也可以在this function中为选择器使用内容blur。

removeClass()采用类名或函数。不确定参数列表中的1800是什么。如果你想让动画看到动画。

试试这个......

$(".div-input").blur(function () {
     $(this).removeClass("div-input").addClass('div-input-second');
});

Answer 2

您可以使用.animate（）自行更改CSS值，但是没有办法在类之间淡入淡出。

Answer 3

要执行css样式动画，您需要使用.animate jquery animate

Answer 4

要扩展之前的答案，.removeClass和.addClass函数没有与之关联的时序。如果您想要一个到类的动画，则需要手动为css设置动画这是一个例子：

CSS

.div-input{
    color: red;
    width: 200px;
}

.div-input-second{
    color: blue;
    width: 300px;
}

的jQuery

$(".div-input").click(function () {
    $(this).animate({
        color: '#0000ff',
        width: '300px'
    }, 1800).removeClass("div-input").addClass('div-input-second');
});

这会导致动画发生，然后在动画结束后交换类，因此如果需要，您可以使用该类名做更多的事情。

编辑：

使用.click查看this jsfiddle的工作演示。我不肯定.blur对div元素有显着影响。

编辑2：

将元素淡出，交换类然后淡入淡出的简单效果可能看起来像这样（使用与上面相同的css）：

的jQuery

$(".div-input").click(function () {
    $(this).fadeOut(900, function(){
        $(this).toggleClass("div-input div-input-second")
            .fadeIn(1800);
    })
});

您可以在this updated jsfiddle处看到这一点。

Answer 5

要么使用jQuery animate，要么看看这个插件，http://plugins.jquery.com/project/animate-to-class我没有尝试过，但似乎是你正在寻找的。

另外 - 如果您正在使用FireFox下载Firebug - 它有一个很好的控制台来捕获JS错误。

Answer 6

您可以使用JQuery UI执行此操作 http://jqueryui.com/demos/switchClass/

$(".div-input").blur(function () {
    $(".div-input").switchClass("div-input", "div-input-second", 1800);
    // Optionally to switch back
    // $(".div-input-second").switchClass("div-input-second", "div-input", 1800);  
});

如这个小提琴所示： http://jsfiddle.net/kSBP3/3/

为什么这个Jquery代码不起作用

6 个答案:

CSS

的jQuery

编辑：

编辑2：

的jQuery