Jquery 下拉子菜单仅在第二次滚动后淡出，但在第一次滚动后不会淡出

我正试图通过jQuery将多级下拉菜单合并到我的网站中，jQuery的子菜单以交替的悬停状态淡入淡出。第二次鼠标悬停后，一切正常，但由于某种原因，该功能似乎不会在菜单第一次悬停时启动。有人遇到过这样的问题吗？ 我看到一个类似的问题，没有答案或代码示例，所以我想我会发布我的代码

以下是我的jQuery代码：

$(function(){   
            $('li').has('ul').hover(
                function(){
                    $(this).children('ul').stop().animate(
                        {
                            opacity:1
                        }
                    );//end animate
                },

                function(){
                    $(this).children('ul').stop().animate(
                        {
                            opacity:0
                        }
                    );//end animate
                });

                $(this).prepend('<div id="trigger"></div>');    
        });

$（函数（）{
$（'li'）。有（'ul'）。悬停(
函数（）{
$（this.children（'ul'）.stop（）.animate(
{
不透明度：1
}
)；//结束动画
},
函数（）{
$（this.children（'ul'）.stop（）.animate(
{
不透明度：0
}
)；//结束动画
});
$（this.prepend（“”）；
});

我的CSS中有一个选择器（称为#触发器），其不透明度设置为0，作为

---

触发函数的操作调用。提前谢谢你，querystring。

你能为它准备一个JSFIDLE吗？@Kundan Singh Chouhan-这是我的小提琴：我想小提琴一切都很好。事实上，如果你第一次在主菜单UL上悬停时注意它，你会注意到淡入直到第二次在每个项目上悬停时才起作用，或者至少这就是我的机器上发生的事情。好吧，它在第一次工作，以及您使用的浏览器？