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

Open in new window

charmingduckAsked:
Who is Participating?
 
Sudaraka WijesingheConnect With a Mentor Web Application ProgrammerCommented:
you may also stop the current animation using .stop() before calling new one
$("#pic").css('display','none');



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

Open in new window

0
 
Samuel LiewCommented:
Try this:
$("#pic").css('display','none');

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

$("#name,#phone").blur(function (){
	timeout = setTimeout('$("#pic").slideUp(600)', 30000);
});

Open in new window

0
 
Samuel LiewCommented:
You will also need a global timeout variable outside of the jquery document ready function:

var timeout = null;
0
 
charmingduckAuthor Commented:
great
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.