Question

Here is my code:

$('.button').click(function() {
        $(this).addClass('clicked');
        $('.button').not(this).removeClass('clicked')
            .addClass('not_clicked');
        $('#tool_window,#wrapper').not('#work_area').not('.button').addClass('outside');
    });
    
        $('.outside').click(function() {
            $('.clicked').removeClass('clicked');
            $('*').removeClass('not_clicked');
            
            $('#img_add').animate({
            top:'469px',
            opacity:'0.0'
            });
        });
        
    
        
    $('#image').click(function() {
        $('#img_add').animate({
            top:'566px',
            opacity:'1.0'
        },200);
    });

This is the HTML:

<div id = 'img_add'>
            <form>
                <input id = 'img_loc' type = 'text' /><br /><br />
                <input id = 'add_btn' type = 'button' value = 'Add_Image!' />
            </form>
        </div>
        <div id = 'tool_window'>
            <div id = 'image' class = 'button'>
            Add Image
            </div>
        </div>

I want the img_add div to appear when I click the image div but I want it to fade away when I click away (or on another button). I’ve tried to do this by adding an outside class to the outer elements when a button is clicked and adding a fade away animation to the click handler attached to the outside class. But the fade away animation is not happening. Any ideas on why this isn’t working?

Answer 1

var hoverOverImgAdd=false;
$('#img_add').hover(function(){
 hoverOverImgAdd=true;
}, function(){
 hoverOverImgAdd=false;
});

$('body').mouseUp(function(){
 if(!hoverOverImgAdd){
  // hide using animation here;
 }
});