特定jquery动画的问题

时间:2011-12-12 15:00:19

标签: jquery animation javascript-events

这是我的代码:

$('.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类的单击处理程序添加淡出动画来尝试执行此操作。但是消失的动画并没有发生。关于为什么这不起作用的任何想法?

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

我不确定为什么它不起作用,由于某些原因我甚至无法让它在小提琴中工作,但我建议尝试.blur(),如下所示:http://api.jquery.com/blur/那可以解决你的问题。我会玩它,看看我是否能找到一个有效的解决方案。