jquery＆＃39; bind＆＃39;功能错误绑定

Question

我有一个ul，每个li都有一行图像，我正在尝试将一个函数绑定到每个li上，以便在'mouseenter'上显示图像行，并且在'mouseout'上图像行消失。 ..我基于#id在每个li中的图像包装器div上调用bind（），以便它们独立工作。一切正常，除了绑定函数似乎将每个离散函数绑定到它各自的div，然后绑定到它下面的每个后续li div ...不在上面，但是......所以当我将鼠标向下移动到下面时列表项目（当前已折叠），聚焦的图像行为每个li闪烁...如果我有一个较低的图像行未折叠（一次只能有一个未折叠），并将鼠标移到“上方”​​列表项上，不会闪烁......

继承人代码：

    $('#menu1').bind('mouseenter', function(){

        $('#menu1').animate({'opacity':'1.0'}); 


    }).bind('mouseleave', function(){ 

        $('#menu1').animate({'opacity':'0.0'}); 

    });

继承人http://jsfiddle.net/FjvZs/5/绑定从第74行开始。

我已将bind（）切换为on（），但失去了慢速淡化效果。