1

我创建了一个非常小的 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();​

有人可以帮帮我吗？

亲切的问候梅里亚诺斯尼科斯

4

1 回答 1

1

演示 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();​
于 2012-10-26T10:41:30.760 回答