[Solved] How to create an highlight animation when a control gets focused [closed]

by


I could do it myself!!!

First you have to draw the four corner´s highlights on HTML:

<img id="clt" src="https://stackoverflow.com/questions/17506028/img/clt.png" border="0" style="position:absolute;visibility:hidden"></span>
<img id="crt" src="img/crt.png" border="0" style="position:absolute;visibility:hidden"></span>
<img id="crb" src="img/crb.png" border="0" style="position:absolute;visibility:hidden"></span>
<img id="clb" src="img/clb.png" border="0" style="position:absolute;visibility:hidden"></span>

After, create a JavaScript function:

function getFocusFunct(){
    $("input[type=text], input[type=password], textarea").focus(function(){
        var ctl=$(this);
        var offset=ctl.offset();

        var clt=$("#clt");
        var crt=$("#crt");
        var crb=$("#crb");
        var clb=$("#clb");

        clt.css('visibility','visible');
        crt.css('visibility','visible');
        crb.css('visibility','visible');
        clb.css('visibility','visible');

        clt.animate({top:offset.top-3, left:offset.left-3}, 150);
        crt.animate({top:offset.top-3, left:offset.left+ctl.outerWidth()-4}, 150);
        crb.animate({top:offset.top+ctl.outerHeight()-4,left:offset.left+ctl.outerWidth()-4}, 150);
        clb.animate({top:offset.top+ctl.outerHeight()-4,left:offset.left-3}, 150);
    });
    $("input[type=text], input[type=password], textarea").blur(function(){
        clt.css('visibility','hidden');
        crt.css('visibility','hidden');
        crb.css('visibility','hidden');
        clb.css('visibility','hidden');
    });
}

It´s super awesome effect!!! Try it 🙂

solved How to create an highlight animation when a control gets focused [closed]