这是我的代码:
$('.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
类的单击处理程序添加淡出动画来尝试执行此操作。但是消失的动画并没有发生。关于为什么这不起作用的任何想法?
答案 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/那可以解决你的问题。我会玩它,看看我是否能找到一个有效的解决方案。