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

Posted 2023-05-08

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

【英文标题】：jQuery animate with opacity on images show them at different speeds with same animate time

【发布时间】：2014-06-23 23:49:11

【问题描述】：

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

现场示例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 毫秒，但由于某种原因，它并不适用于所有图像。而且我看不到这里发生了什么。我需要一些帮助。

谢谢。）

【问题讨论】：

可能是根据图像文件大小的影响。就像小尺寸的图片需要更少的时间来显示，大尺寸的图片需要更多的时间来显示。最后一张图片大小是 73.2kb，它需要更少的时间，倒数第三张图片大小是 194kb。

是的，我想过，但是图像已经被缓存了。没关系.. 无论如何谢谢。）

是的，但是即使您将它们与缓存一起使用也需要时间。一旦尝试使用相同大小的文件。

仍然认为这没有意义。想想看。图像被缓存。图像已经存在。我只玩它的不透明度。图像不是从缓存中恢复的，它已经画好了。无论如何，我重新压缩并上传了所有图像来演示它。看看live example

【参考方案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 上自行尝试。

【讨论】：

经过测试，它就像一个魅力。我仍然不知道为什么在不同的动画时间下原因不能按预期工作，但效果是理想的。非常感谢。

@pg02，我很高兴。其实，我也不知道，但调查起来很有趣。

嗯，我试图在 jquery 错误跟踪器上报告为错误，但我得到了一个禁止页面。我稍后会尝试。再次感谢您的帮助@Gino