Jquery 如何实现点击搜索框宽度增加的效果动画

我使用的前端 JS 框架是 jquery, 现在 html 中有一个搜索框 <input>, 如何实现当我鼠标点击时，搜索框宽度增加的动画，以及 <input> 失去焦点时，恢复原有宽度的动画呢？

380 次阅读改进

1 个解决方案

AllenJiang

中间件研发，关注微信公众号 : 小哈学Java, 回复"666", 即可免费领取10G学习&面试资料

$('#your-search-input').click(function() {
	// 获取焦点时，增加到 500px
	$('#your-search-input').animate({width: '500px'});
}).blur(function() {
	// 失去焦点时，恢复到 300px
	$('#your-search-input').animate({width: '300px'});
});

改进