行建立动画输入

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

In focusin event, borders start to fadein and in focusout event borders disappear.

在focusin事件中,边框开始淡化并且焦点在事件边界消失。

But the line should look like building up while moving and quite fast. Now it loads in a fade in motion but I want it to be in a moving motion.

但这条线看起来应该像移动时一样快速地建立起来。现在它加载了一个淡入淡出的运动,但我希望它处于一个移动的运动中。

1 个解决方案

#1

Please try the below code:

请尝试以下代码:

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

Hope this will help!!

希望这会有所帮助!!

1 个解决方案

#1

更多相关文章

随机推荐