Question

I have create a very small jQuery plugin, for personal usage, that creating an overlay on top of an image on hover event, and then animating two icons.

On mouse out it is animating the icons again, and then fade out the overlay.

While the animation is fine, the problem comes with the icons. In too fast pass of the mouse animate – in – the icons but does not animate – out – the icons.

Here you can see a live example of what I mean: http://jsfiddle.net/merianos/yPerY/1/

Following the source code

HTML

<section class="clearfix span-10 last post_container ">
    <article>
        <div class="imageHover">
            <span class="overlay"></span>
            <a href="#" class="image_preview"></a>
            <a href="#" class="image_link"></a>
            <img src="http://goo.gl/YRC7G" />
        </div>
    </article>
</section>​

CSS

.post_container
{
    position : relative;
    margin   : 100px;
}

    .post_container article
    {
        position    :   relative;
        display     :   block;
        width       :   280px;
    }


        .post_container article img
        {
            width   :   278px;
            border  :   1px solid #dfe1e0;
        }

            .post_container article .overlay
            {
                z-index     :   740;
                display     :   block;
                width       :   100%;
                height      :   121px;
                background  :   #000;
                opacity     :   0;
                position    :   absolute;
                top         :   0;
                left        :   0;
            }


            .post_container article .image_link,
            .post_container article .image_preview
            {
                display             :   block;
                width               :   32px;
                height              :   32px;
                position            :   absolute;
                cursor              :   pointer;
                z-index             :   741;
                top                 :   88px;
                opacity             :   0;
            }

            .post_container article .image_link
            {
                background :   #0AF;
                left       :   98px;
            }

            .post_container article .image_preview
            {
                background :   #F0A;
                left       :   150px;
            }​

JavaScript

;(
    function($)
    {
        $.fn.extend(
            {
                wplImageHover: function(options)
                {
                    this.defaultOptions = {};

                    var settings    =   $.extend({}, this.defaultOptions, options);
                    var image       =   null;

                    var methods =   {
                        init    :   function()
                        {
                            image.mouseenter(
                                function(e)
                                {
                                    var overlay = $(this).find('.overlay');

                                    overlay.stop().animate(
                                        {
                                            'opacity'   :   '0.25'
                                        },
                                        150
                                    );

                                    overlay.queue(
                                        function()
                                        {
                                            var image_preview   =   $(this).siblings('.image_preview');
                                            var image_link      =   $(this).siblings('.image_link');

                                            image_preview.stop().animate(
                                                {
                                                    'opacity'   :   1,
                                                    'top'       :   '44px'
                                                },
                                                150
                                            );

                                            image_link.stop().animate(
                                                {
                                                    'opacity'   :   1,
                                                    'top'       :   '44px'
                                                },
                                                150
                                            );

                                            $(this).dequeue();
                                        }
                                    );

                                    e.preventDefault();
                                }
                            ).mouseleave(
                                function(e)
                                {
                                    var image_preview   =   $(this).find('.image_preview');
                                    var image_link      =   $(this).find('.image_link');

                                    image_preview.stop().animate(
                                        {
                                            'opacity'   :   0,
                                            'top'       :   0
                                        },
                                        150
                                    );

                                    image_link.stop().animate(
                                        {
                                            'opacity'   :   0,
                                            'top'       :   0
                                        },
                                        150
                                    );

                                    image_link.queue(
                                        function()
                                        {
                                            var overlay   =   $(this).siblings('.overlay');

                                            overlay.stop().animate(
                                                {
                                                    'opacity'   :   0
                                                },
                                                150
                                            );

                                            overlay.queue(
                                                function()
                                                {
                                                    $(this).css(
                                                        {
                                                            'opacity'   :   '0'
                                                        }
                                                    );

                                                    $(this).siblings('.image_link, .image_preview').css(
                                                        {
                                                            'opacity'   :   '0',
                                                            'top'       :   '88px'
                                                        }
                                                    );

                                                    $(this).dequeue();
                                                }
                                            );

                                            $(this).dequeue();
                                        }
                                    );

                                    e.preventDefault();
                                }
                            );
                        }
                    }

                    return this.each(
                        function()
                        {
                            image = $(this);

                            methods.init();
                        }
                    );
                }
            }
        );
    }
)(jQuery);

$('.imageHover').wplImageHover();​

Can anybody help me please ?

Kind regards
Merianos Nikos

Answer 1

Demo JSFiddle

In mouseleave event before applying top and opacity to the images using CSS stop the animation that is happening on those images. Otherwise it will override the CSS that you are applying (Only if the animation is happening while applying CSS). In case while we move very fast the animation that you are applying in mouse enter is happening. So this causes the issue.

So try the below script.

;(
function($)
{
    $.fn.extend(
        {
            wplImageHover: function(options)
            {
                this.defaultOptions = {};

                var settings    =   $.extend({}, this.defaultOptions, options);
                var image       =   null;

                var methods =   {
                    init    :   function()
                    {
                        image.mouseenter(
                            function(e)
                            {
                                var overlay = $(this).find('.overlay');

                                overlay.stop().animate(
                                    {
                                        'opacity'   :   '0.25'
                                    },
                                    150
                                );

                                overlay.queue(
                                    function()
                                    {
                                        var image_preview   =   $(this).siblings('.image_preview');
                                        var image_link      =   $(this).siblings('.image_link');

                                        image_preview.stop().animate(
                                            {
                                                'opacity'   :   1,
                                                'top'       :   '44px'
                                            },
                                            150
                                        );

                                        image_link.stop().animate(
                                            {
                                                'opacity'   :   1,
                                                'top'       :   '44px'
                                            },
                                            150
                                        );

                                        $(this).dequeue();
                                    }
                                );

                                e.preventDefault();
                            }
                        ).mouseleave(
                            function(e)
                            {
                                var image_preview   =   $(this).find('.image_preview');
                                var image_link      =   $(this).find('.image_link');

                                image_preview.stop().animate(
                                    {
                                        'opacity'   :   0,
                                        'top'       :   0
                                    },
                                    150
                                );

                                image_link.stop().animate(
                                    {
                                        'opacity'   :   0,
                                        'top'       :   0
                                    },
                                    150
                                );

                                image_link.queue(
                                    function()
                                    {
                                        var overlay   =   $(this).siblings('.overlay');

                                        overlay.stop().animate(
                                            {
                                                'opacity'   :   0
                                            },
                                            150
                                        );

                                        overlay.queue(
                                            function()
                                            {
                                                $(this).css(
                                                    {
                                                        'opacity'   :   '0'
                                                    }
                                                );

                                                $(this).siblings('.image_link, .image_preview').stop().css(
                                                    {
                                                        'opacity'   :   '0',
                                                        'top'       :   '88px'
                                                    }
                                                );

                                                $(this).dequeue();
                                            }
                                        );

                                        $(this).dequeue();
                                    }
                                );

                                e.preventDefault();
                            }
                        );
                    }
                }

                return this.each(
                    function()
                    {
                        image = $(this);

                        methods.init();
                    }
                );
            }
        }
    );
}
)(jQuery);

$('.imageHover').wplImageHover();​