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上尝试自己。

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

1 个答案: