проблемы со специфической анимацией jquery

Question

Вот мой код:

$('.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);
    });

Это 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>

Я хочу, чтобы img_add div появлялся, когда я нажимал на image div, но яхочу, чтобы он исчезал, когда я щелкаю (или другую кнопку).Я попытался сделать это, добавив класс outside к внешним элементам при нажатии кнопки и добавив анимацию исчезновения в обработчик щелчка, присоединенный к классу outside.Но затухающей анимации не происходит.Любые идеи о том, почему это не работает?

Answer 1

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

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

Answer 2

Я не уверен, почему это не работает, по какой-то причине я даже не могу заставить его работать в скрипке, но я бы предложил попробовать .blur(), как показано здесь: http://api.jquery.com/blur/ Это может решить вашу проблему. Я поиграюсь с ним и посмотрю, смогу ли я получить рабочее решение.