javascript - 行建立输入动画

Question

这是我的 fiddle 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 事件中边框消失。

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

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

希望这会有所帮助!