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

Question

我制作了一个简单的点击动画输入。我也做了一些基本样式，但我不知道如何替换 {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 类。

这可能吗？

Answer 1

只需 .addCLass('customwidth')。

DEMO

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

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

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