下拉子菜单仅在第二次翻转后淡出，但不是第一次翻转

Question

我正在尝试通过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>');    
        });

我的CSS中有一个选择器（称为#trigger），其不透明度设置为0，其作用如下 解雇职能的行动呼吁。提前谢谢，查询。