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

在focusin事件中，边框开始淡化，并且焦点输出事件边框消失。

但这条线看起来应该像移动时一样快速地建立起来。现在它以渐弱的方式加载，但我希望它处于移动状态。

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

希望这会有所帮助!!

行构建动画输入

1 个答案: