入力用ライン構築アニメーション

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

希望!!