web form jquery

on the form, there's a name filed, a phone field, and a picture, a submit button.

how do i achieve this?

the picture is hidden, only when you focus on either the name field or phone field, the picture slidedown, when it's blur, the picture stay hidden.

The problem with my code is(see attached), when I finish name field and tab to phone field, it will still do the slideup and then slidedown. But what I want is, if the blur doesnt last more than 30 secs, it doesnt do the slideup, how to do this in jquery?  

$("#pic").css('display','none');



$("#name,#phone").focus(function (){
   
    $("#pic").slideDown(600);
                      
});
 
$("#name,#phone").blur(function (){
   
    $("#pic").slideUp(600);
                      
});

Select allOpen in new window