라인 입력 애니메이션 입력

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

희망!