Question

Using jQuery 1.6.1, given I have the following HTML:

<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
</div>

When an <input> in <div class="control"> (hereafter only control) is focused, the <label> (with position: relative;) animates:

$('.control :input').bind('focus', function(e){
    $(this).prevAll('label').animate({
        'left': '-50px'
    }, 250);
});

And when blurred, the <label> returns:

.bind('blur', function(e){
    $(this).prevAll('label').animate({
        'left': '0px'
    }, 250);
});

However, if one of the <input> elements gains focus, and then blurs as focus is switched to another <input> within the same control (via Tab or mouse click) the events of course still fire, and the <label> animates back and forth.

How can I force the blur event to trigger only when focus is lost from all inputs within a given control?

Answer 1

Edit: Updated the answer based on more inputs provided by the OP.

If a slight delay of one second to hide the label is fine then you can use setTimeout/clearTimeout combination..
Something like:

<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>
<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

    <script type="text/javascript"> 
        var timeoutIds = [];
            $('.control').each(function(index, el){
                $(':input', el).bind('focus', function(e){     
                        clearTimeout(timeoutIds[index]);
                        $(this).prevAll('label').animate({        
                                'left': '-50px'     
                        }); 
                });

                $(':input', el).bind('blur', function(e){     
                        var that = this;
                        timeoutIds[index] = setTimeout(function(){
                            $(that).prevAll('label').animate({        
                                    'left': '0px' 
                            }); 
                    }, 500);
                });
            });
    </script>

Working example: http://jsfiddle.net/Tn9sV/2/