Question

我有一个固定宽度的输入。我想要的是当我专注于它时我希望他的宽度通过使用css或jquery来缓慢改变。这是我的代码：

<section class="webdesigntuts-workshop">
   <form action="" method="">           
     <input type="search" placeholder="What are you looking for?">              
     <button>Search</button>
   </form>
</section>

这是我正在使用的CSS：

webdesigntuts-workshop input {
    background: #ddd;
    width: 200px;
}
.webdesigntuts-workshop input:focus {
    background: #ddd;
    width: 250px;
    color: black;
}

但问题是宽度变化如此之快。我希望它能够缓慢改变。

Answer 1

您可以使用CSS转换：

webdesigntuts-workshop input {
    background: #ddd;
    width: 200px;
    transition:1s;/* timing */
}

在焦点上它会在一秒内增长50px，并且一旦失去焦点就会缩小速度。

Answer 2

您需要添加转换：

webdesigntuts-workshop input {
    background: #ddd;
    width: 200px;
    transition: width .3s ease-in-out;
    -webkit-transition: width .3s ease-in-out;
    -moz-transition: width .3s ease-in-out;
    -ms-transition: width .3s ease-in-out;
}
.webdesigntuts-workshop input:focus {
    background: #ddd;
    width: 250px;
    color: black;
}

根据需要调整时间。

Answer 3

$('input').focus(function() {
    $('input').css( "with", '250px' );
});

且只有

webdesigntuts-workshop input {
    background: #ddd;
    width: 200px;
    color: black; 
}

Answer 4

您需要像这样添加transition：

.webdesigntuts-workshop input {
    background: #ddd;
    width: 200px;
}
.webdesigntuts-workshop input:focus {
    background: #ddd;
    width: 250px;
    color: black;
    transition:1s;
}

使用css3进行聚焦时如何使输入缓慢调整大小

4 个答案: