为输入建立动画线答案

【问题标题】：line building up animation for input为输入建立动画线
【发布时间】：2016-08-03 16:20:18
【问题描述】：

这是我的小提琴link。

jQuery('input').focusin(function(){
  window.setTimeout(function() {
    jQuery('input').addClass('animatedBottomBorder');
  }, 150);
  window.setTimeout(function() {
    jQuery('input').addClass('animatedLeftBorder');
  }, 300);
  window.setTimeout(function() {
    jQuery('input').addClass('animatedTopBorder');
  }, 450);
  window.setTimeout(function() {
    jQuery('input').addClass('animatedRightBorder');
  }, 600);
});
jQuery('input').focusout(function(){
    jQuery('.searchTextField').removeClass('animatedBottomBorder');
    jQuery('.searchTextField').removeClass('animatedLeftBorder');
    jQuery('.searchTextField').removeClass('animatedTopBorder');
    jQuery('.searchTextField').removeClass('animatedRightBorder');
});

在 focusin 事件中，边框开始淡入，在 focusout 事件中边框消失。

但是这条线应该看起来像在移动时建立起来并且速度非常快。现在它以淡入淡出的方式加载，但我希望它处于运动状态。

【问题讨论】：

您希望动画在点击进出时快速？
是的，我想要它快一点，但主要问题是我想将淡入淡出动画更改为移动动画，就像线条建立起来一样？ @DebakantMohanty
改用css3动画不是更简单吗？ Le：带关键帧动画

标签： javascript jquery html css css-transitions

【解决方案1】：

请尝试以下代码：

jQuery('input').focusin(function(){
  window.setTimeout(function() {
    jQuery('input').css({"border-right-color": 'blue'}).animate({
        borderWidth: 4
    }, 500, 'swing');
  }, 150);
  window.setTimeout(function() {
    jQuery('input').css({"border-bottom-color": 'green'}).animate({
        borderWidth: 4
    }, 500, 'swing');
  }, 300);
  window.setTimeout(function() {
    jQuery('input').css({"border-left-color": 'black'}).animate({
        borderWidth: 4
    }, 500, 'swing');
  }, 450);
  window.setTimeout(function() {
    jQuery('input').css({"border-top-color": 'red'}).animate({
        borderWidth: 4
    }, 500, 'swing');
  }, 600);
});

希望这会有所帮助！

【讨论】：

感谢您的代码。但它再次处于淡入淡出模式，我希望它像边界线一样填充白色，这将产生建筑线的效果。有任何想法吗？ @Debakant Mohanty