特定 jQuery 动画的问题答案

【问题标题】：Problems with specific jQuery animation特定 jQuery 动画的问题
【发布时间】：2011-12-12 15:00:18
【问题描述】：

这是我的代码：

$('.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 类的单击处理程序添加淡入淡出动画来做到这一点。但是淡出动画没有发生。关于为什么这不起作用的任何想法？

【问题讨论】：

标签： jquery animation jquery-events

【解决方案1】：

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

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

【讨论】：

@Nakul——你介意解释一下你在这里做了什么吗？ hoverOverImgAdd 是什么？你有没有在其他地方定义它？布尔值如何触发动画？
对不起。 hoverOverImgAdd 是第 1 行定义的变量。我们将鼠标是否在 img_add 上存储在此变量中。现在，当有人点击页面上的任何地方时，我们检查它是否超过了 img_add 或没有使用这个变量。

【解决方案2】：

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

【讨论】：