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

Question

我制作了一个简单的 onlick 动画输入。我也做了一些基本样式，但我不知道如何替换 {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' 宽度 .customwidth class.

这可能吗？

Answer 1

JS & CSS & HTML

$(".search").click(function () {

    $('.search input').addClass('customwidth');
    
    
});

.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 !important; }
#test{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="search">
        <input id="test" type="text" placeholder="Fast search" />
        <i class="fa fa-search"></i>
</div>

DEMO-JSFiddle

Answer 2

就.addCLass('customwidth')。

DEMO

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

然后在CSS中使用转换。我更改了 customwidth 选择器的特异性，因为您不必使用 !important。可能会把你搞得一团糟运行.

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

Answer 3

您可以添加 div 和 customwidth class 并读取其宽度以在动画中使用它。

$(function(){
$(".search").click(function () {
     var $inspector = $("<div>").css('display', 'none').addClass('customwidth');
    $("body").append($inspector);

    var width = $inspector.css('width');
    $('.search input').animate({width:width},{ duration:200, specialEasing: { width: 'linear' } });
});
});

JSFiddle Demo

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

Replace animation width with custom div in jQuery

html

css

jquery

onclick