jQuery animate with opacity on images show them at different speeds with same animate time

Question

I've a menu with some items and an image background is shown/hidden at mouse enter/leave events on those items. There is a base background image that doesn't change (instead of a white background). The problem is that some images are shown slower than others with the same animation time.

Live example here.

And jQuery code that I use:

// 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);
            });
        });

As you can see, the time is 300ms for all images but for some reason it doesn't work for all. And I can't see what's happen here. I need some help.

Thank you .)

Answer 1

Try to set the same time for showing and hiding images. For example:

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);
        });
    });

It seems to be working. Try on your own on JSFiddle.