if focus function

im trying to hide a bee while its movement is not done yet if it is focused

here is the bee, that is originally hidden beyond the cloud and not seen, and in first 4 seconds it goes up out of the cloud, then goes to the right also in 4 seconds, then it goes down in 0.3sec, like its hiding, then goes to its origin point beyond the cloud and function repeats in 20 secs. but i want, while these movements, if it is focused, i want the bee to hide, i mean go down in 0.3sec, and then it will appear a开发者_Python百科gain after 20 secs.

    var bee5 = function() {
    $("#bee5").animate({"top": "-50px"}, 3000, function() { 
        $(this).animate({"left": "130px"}, 700,function() { 
            $(this).animate({"left": "110px"}, 800, function() { 
                $(this).animate({"left": "125px"}, 700, function() { 
                    $(this).animate({"left": "115px"}, 800, function() { 
                        $(this).animate({"left": "130px"}, 1000, function() { 
                            $(this).animate({"left": "110px"}, 900, function() { 
                                $(this).animate({"left": "120px"}, 800, function() { 
                                    $(this).animate({"top": "-10px"}, 250)
                                })
                            })
                        })
                    })
                })
            })
        })
    })
    $('#bee5').mouseover(function() {
        $(this).animate({"top": "-10px"}, 250)
    });
    setTimeout(bee5, 15000);
}

here is css: the bee5 original point

#bee5 { position:absolute; top:-10px; left:120px; z-index:0; }

If you want to do the animation when the pointer is over the item, you should use mouseover instead of focus, see this fiddle.

If it's a form input, then you could use blur.