为输入建立动画线

Question

这是我的小提琴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');
});

在焦点事件中，边界开始变暗，焦点事件边界消失。

但是这条线看起来应该是在移动的同时快速地建立起来的。现在，它加载在一个淡入运动，但我希望它是在一个移动的运动。

Answer 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);
});

希望这会有帮助！！