jquery - 用jQuery中的自定义div替换动画宽度

我做了一个简单的动画输入。我也做了一些基本的风格，但我不知道如何替换{width:'500px'}宽度自定义div。在这种情况下：.customwidth。

这是我的完整代码：

的HTML

<div class="search">
    <input type="text" placeholder="Fast search" />
    <i class="fa fa-search"></i>
</div>

的CSS

.search { float:left; margin:10px 0px 0 10px;  height:31px; border:1px solid rgba(0, 0, 0, 0.10); border-radius:15px;  }
.search i { float:right; margin:6px 10px; }
.search input { float:left; margin:2px 0px 0 10px; width:70px; height:25px; border:none; outline:none; }

.customwidth { width:500px; }

JS

$(".search").click(function () {
  $('.search input').animate({ width:'500px'}, { duration:200, specialEasing: { width: 'linear' } });
});

JSFIDDLE

我想从css文件更改动画宽度，因此出于这个原因，我需要替换width:'500px' width .customwidth类。

这有可能吗？

最佳答案

只是.addCLass('customwidth')。

DEMO

$(".search").click(function () {
    $('.search input').addClass('customwidth');
});

然后在CSS中使用过渡。我更改了customwidth选择器的特异性，因为您不必使用！important。从长远来看可能使您陷入困境。

.search .customwidth {
    width:500px;
    transition: width .2s ease;
}