Question

我创建了一个非常小的jQuery插件，供个人使用，在悬停事件中在图像上创建叠加，然后为两个图标设置动画。

鼠标移开时，它会再次为图标设置动画，然后淡出叠加层。

虽然动画很好，但问题在于图标。在快速传递鼠标动画 - 图标但不动画 - 图标。

在这里，您可以看到我的意思的实例：http://jsfiddle.net/merianos/yPerY/1/

遵循源代码

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

有人可以帮帮我吗？

亲切的问候 Merianos Nikos

Answer 1

Demo JSFiddle

在使用CSS对图像应用顶部和不透明度之前的mouseleave事件中，停止在这些图像上发生的动画。否则它将覆盖您正在应用的CSS（仅当应用CSS时发生动画）。如果我们移动非常快，您正在鼠标输入中应用的动画正在发生。所以这会导致问题。

请尝试以下脚本。

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

悬停时的jQuery动画|很快通过，停止动画

1 个答案: