使用Jquery ui对话框设置Jquery悬停动画

我有一个小但奇怪的问题，我的动画是用jquery和jQueryUI实现的。您可以在下面看到一个简单的工作演示

当您尝试单击窗帘中的“单击我”，然后单击弹出窗口中的“关闭”时，问题就会出现。您将看到窗帘和图像都向上。你知道为什么吗

非常感谢

$（文档）.ready（函数（）{
$（'.box\u product\u image'）。悬停（函数（）{
$（'.box_up-down'，this）.stop（）.animate({
底部：“0px”
}, 300);
$（“.box\u product\u arrow”，此）.fadeOut（300）；
}，函数（）{
$（'.box_up-down'，this）.stop（）.animate({
底部：'-96px'
}, 600);
$（'box\u product\u arrow'，this）.fadeIn（300）；
});
$（文档）。在（'单击'，'文本'）上，函数（）{
$（“#对话框”）。对话框({
身高：200，
宽度：200，
莫代尔：是的，
关闭文本：“关闭”
});
});
});
*，ul，ol{
边界：0无；
保证金：0；
填充：0；
}
.box\u产品\u边框\u图像{
边框：1px实心#d9d9d9；
边界半径：6px；
高度：120px；
溢出：隐藏；
宽度：150px；
利润率：50像素；
}
.box\u产品\u图像{
浮动：左；
高度：120px；
溢出：隐藏；
位置：相对位置；
}
.box_上下{
背景色：rgba（0,0,0,0.8）；
底部：-96px；
身高：100%；
左：0；
位置：绝对位置；
宽度：150px；
}
.box_上下>*{
颜色：#fff；
字体大小：11px；
}
.box\u产品\u名称{
字体大小：粗体；
利润率：3px010px；
}
.box\u产品\u箭头{
高度：19px；
位置：绝对位置；
右：15px；
顶部：3px；
宽度：10px；
}
.box\u产品描述{
利润率：5px010px；
}
.box\u产品描述{
字体大小：10px；
线高：10px；
列表样式类型：无；
}
.box\u产品描述{
边缘底部：6px；
}
.box\u产品描述{
颜色：#fff；
文字装饰：无；
}
#对话{
背景色：rgba（0,0,0,0.5）；
}

正文








我把你的代码（jQuery、HTML和css）重写了一点，看看小提琴。
万恶之源可能是因为链接始终集中在焦点上。。因此，在点击后将其模糊可能是必要的


如果它没有按预期工作，请告诉我。
我稍微重写了一下您的代码（jQuery、HTML和css），看看小提琴。
万恶之源可能是因为链接始终集中在焦点上。。因此，在点击后将其模糊可能是必要的


如果它不能按预期工作，请告诉我。
谢谢！只需使用
$（this.blur（）它工作得很好：）再次感谢谢谢！只需使用
$（this.blur（）它工作得很好：）再次感谢
$('#text').on('click', function(e){
    $(this).blur(); //remove focus from clicked link
    $('#dialog').dialog({
        height: 200,
        width: 200,
        modal:true,
        closeText:"close"
        });
    });