在图像上具有不透明度的 jQuery 动画以相同的动画时间以不同的速度显示它们

Question

我有一个包含一些项目的菜单，并且在这些项目上的鼠标进入/离开事件时显示/隐藏图像背景。有一个不会改变的基本背景图像（而不是白色背景）。问题是在动画时间相同的情况下，某些图像的显示速度比其他图像慢。

现场示例here。

以及我使用的 jQuery 代码：

// getting selectors

        var $cont_imgs = $('img', '.animacion_img');
        var selectors = {
            $lis: $('li', '#cssmenu'),
            $imgs: $([
                $("#inicio"),
                $("#canalcolor"),
                $("#sada"),
                $("#casas_de_madera"),
                $("#riveira"),
                $("#azalea"),
                $("#contacto")
            ])
        };

// applying some css

        selectors.$imgs.each(function () {
            $(this).css({position: 'absolute', top: 0, opacity: 0}).hide();
        });

// registering events

        selectors.$lis.each(function (i) {
            $(this).on('mouseenter',function () {
                selectors.$imgs[i].animate({ opacity: 1 }, 300);
            }).on('mouseleave', function () {
                $cont_imgs.each(function () {
                    $(this).stop(true, true);
                });
                selectors.$imgs[i].animate({ opacity: 0 }, 1000);
            });
        });

如您所见，所有图像的时间都是 300 毫秒，但由于某种原因，它并不适用于所有图像。而且我看不到这里发生了什么。我需要一些帮助。

谢谢。）

Answer 1

尝试设置显示和隐藏图像的相同时间。例如：

selectors.$lis.each(function (i) {
        $(this).on('mouseenter',function () {
            selectors.$imgs[i].animate({ opacity: 1 }, 500);
        }).on('mouseleave', function () {
            $cont_imgs.each(function () {
                $(this).stop(true, true);
            });
            selectors.$imgs[i].animate({ opacity: 0 }, 500);
        });
    });

它似乎正在工作。在JSFiddle 上自行尝试。