Question

http://jsfiddle.net/caMvN/1/

when you hover over the green area, it is supposed to show two text fields. Now what I want to achieve is, when I hover over the green area, or the input fields, they should be visible without the flicker. Also if some text has been entered into the text fields, and I hover out, there should be a delay or timer before the fields disappear….

Any idea how this can be done with jquery?

Answer 1

To prevent the flicker, just use mouseenter and mouseleave instead:

$("#back2").mouseenter(function(){
  $("form").fadeIn(100);
}).mouseleave(function(){
    $("form").hide();
});

And for the delay, you can do something like:

$("#back2").mouseenter(function(){
  $("form").fadeIn(100);
}).mouseleave(function(){
    if ($('#inp1').val() != ""){
        setTimeout(function() {$("form").hide()}, 500);
    } else {
        $("form").hide();
    }
});

Here’s a working example

Update using hover in response to comments below:

$("#back2").hover(function(){
    $("form").fadeIn(100);
}, function(){
    if ($('#inp1').val() != ""){
        $setTimeout(function() {$("form").hide()}, 500);
    } else {
        $("form").hide();
    }
});